Splicing new array of items onto existing Knockout

Question

I have a knockout observable array being populated with some initial values when the web page loads, and I want to add to the observable array via splice method as the user interacts with the page. The new items I'm trying to add to the array have the exact same properties as the original items in the array, but when I try to splice the new items onto the existing array, I get a Knockout binding error, ex: "Error: Unable to parse bindings. Message: ReferenceError: ContactName is not defined; Bindings value: text: ContactName". This error occurs even though the property in question does exist on all the items in the new array. I'm trying to do the splice on the Knockout observable array, not the underlying array object, because I want the bindings to update automatically. The splice code looks like this: vmContacts.Contacts.splice(vmContacts.Contacts().length,0,contactData2);.

I created a fiddle example here so you can see it in action: http://jsfiddle.net/ak47/pMFwe/. You'll see the error in the browser console when you click the Add Contacts button.

I'd like to avoid looping through the array of new objects to do a push() for each item I need to add, that's where a splice should work, but it's not. Is this a known issue in Knockout or am I doing something wrong? Thanks for the help!

Answer 1

You're not creating a view model with observables in it, you're just parsing the JSON into a straight JS object. Use the mapping plugin to do that:

var contactData2 = ko.mapping.fromJSON(contactJSON1);

Equally, I don't think you can get out of using a foreach loop to add each one to the array:

var contactData2 = ko.mapping.fromJSON(contactJSON2);
ko.utils.arrayForEach(contactData2(), function(item) {
vmContacts.Contacts.push(item);

Answer 2

You try to pass the contactData2 as the third parameter of Array.splice but Array.splice does not support an array as the third parameter. See also in documentation.

So you need to write something like

vmContacts.Contacts.splice(vmContacts.Contacts().length, 0, 
   contactData2[0], contactData2[1], contactData2[2], contactData2[3]);

Or you can use push together with apply in order to "join" your two arrays:

vmContacts.Contacts.push.apply(vmContacts.Contacts,contactData2);

Demo JSFiddle.