Knockout JS - Observable becomes undefined when added to an array

Question

I have an object called purchase that gets put into one of two observable arrays depending on its status. The purchase object has an observable called integrationStatus that I default to a css class name of integration-status--complete

For some reason the purchases in the Scheduled array are coded green as expected but the purchase in the Unscheduled array throws an error as integrationStatus is undefined

Thanks in advance

JS Fiddle

You are binding viewModel object to view, so should it not be someVariableNameThatHoldsPurchaceObject.integrationStatus? — Rajesh Dixit
– Rajesh Dixit, Commented Oct 24, 2017 at 6:40
Hi, welcome to Stack Overflow. Please create a minimal reproducible example so that other users can reproduce your issue. Array1, table2, foo, bar are rather confusing and will lead to us making assumptions about your code as @Rajesh is making in the above comment. How are you using the foreach binding? How are you "moving" from one array to the other? It would really easy to help you if you can create a minimal fiddle or a working snippet. — adiga
– adiga, Commented Oct 24, 2017 at 7:31
Thanks for the feedback @adiga. This is my first post so I appreciate the comments. Have added a fiddle as suggested. — David Burke
– David Burke, Commented Oct 25, 2017 at 5:39

Devon Freitas · Accepted Answer · 2017-10-25 14:43:30Z

2

The issue is related to the mapping configuration within Schedule. The mapping call ko.mapping.fromJS(data, { scheduleDays : scheduleDayMapping }, self) instructs the utility to only customize the mapping of the scheduleDays object from the data variable.

Since that configuration doesn't include an entry for unallocatedHolder, the mapping utility uses the default observable creation behavior instead of the custom behavior. The UnallocatedHolder function is never called, so its purchases array doesn't get the custom mapping. Without that mapping, integrationStatus is not defined for those purchases.

I'd suggest defining a new mapping configuration for Schedule like this:

var scheduleMapping = {
  "scheduleDays": scheduleDayMapping,
  "unallocatedHolder": {
    create: function(options) {
      return new UnallocatedHolder(options.data);
    }
  }
};

Then, reference this new mapping configuration within Schedule by updating the mapping line to

ko.mapping.fromJS(data, scheduleMapping, self);

Revised Fiddle

answered Oct 25, 2017 at 14:43

Devon Freitas

633 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

David Burke Over a year ago

Awesome Devon, that makes sense. Thanks for the help!

Collectives™ on Stack Overflow

Knockout JS - Observable becomes undefined when added to an array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related