knockout mapping toJS bug? empty array items

Question

With knockoutjs mapping plugin 2.11, I found that ko.mapping.toJS generated empty array items if viewmodel (with an array element) is updated with ko.mapping.fromJS and the new array element's length is longer than the old one.

My initial data mapped is:

var initData = {text: 'Some Text', 
                arr: [{key: 1, value: 'a'}, 
                      {key: 2, value: 'b'}]};

Then I updated view model with a new object:

var newData = {text: 'Changed Text', 
                arr: [{key: 1, value: 'aa'}, 
                      {key: 12, value: 'bb'},
                      {key: 13, value: 'cc'}]};

After that I called ko.mapping.toJS(), I found that the 3rd array item is an empty object. I am not sure if this is a bug or I missed something. Another thing I noticed is, it happens only first time I update data. If I update view model with initData then newData again, the result is correct. http://jsfiddle.net/gonglei/xgPSq/

edit: Thanks for your answer Jason. Your solution seems not fit my situation in my real project. I need to retrieve the modified data object and send it to server. So when the moment I call ko.mapping.toJS I hope I can get the correct data object right away, not just show the JSON string in a computed function. I put a break point right after the call to ko.mapping.toJS and watch the data object and the 3rd element is indeed empty. And my server did receive this empty element. The throttle extender did get me correct object, but it is async way. Anyway I reported it as a bug, see if the developer can confirm it or give me a solution.

The best probably is to report this bug at github.com/SteveSanderson/knockout.mapping — Niko
The data object is correct immediately and ko.mapping.toJS returns correct JSON, I think the only problem is ko.mapping.toJS not causing the computed to trigger a gui change. — Jason Goemaat
I have also experienced an issue in IE 9 where Knockout mapping populates empty items in a collection. This error only occurs sometimes, which makes it hard to diagnose. I had a 4 item JSON array that populated only the first and last items ([[object Object],,,[object Object]]). Weird huh? — sky-dev

Jason Goemaat Jason Goemaat · Accepted Answer · 2012-05-06T07:46:15

The third item is not an empty object. You can see by your list binding that it has values, and even if you put this at the end of your change() function, it returns the correct JSON:

alert('JSON is ' + ko.mapping.toJSON(self.data));

Maybe ko.mapping.toJSON() doesn't register itself as dependent properly or it takes some shortcuts and is not meant to be used in a computed?

Edit

Using the throttle extender to force the compute to happen after all changes are made solves the problem (jsfiddle)

    this.json = ko.computed(function() {
        return JSON.stringify(ko.mapping.toJS(self.data, mapping));
    }).extend({ throttle: 1 });

knockout mapping toJS bug? empty array items

1 Answers