Knockout's mapping breaks observable arrays

Question

I'm experiencing a strange problem with Knockout's mapping plug-in.

If I fill an observable array through mapping I can't iterate the array or get its length, even though the UI is updated correctly, the array seems empty.

You can find a working jsFiddle here: http://jsfiddle.net/VsbsC/

This is the HTML mark-up:

<p><input data-bind="click: load" type="button" value="Load" /></p>
<p><input data-bind="click: check" type="button" value="Check" /></p>
<table>
    <tbody data-bind="foreach: items">
        <tr>
            <td data-bind="text: name"></td>
            <td data-bind="text: value"></td>
        </tr>
    </tbody>
</table>
<p data-bind="text: total"></p>

This is the JavaScript code:

var ViewModel = function () {
    var self = this;
    self.items = ko.observableArray();
    self.load = function () {
        self.items([
            { "name": "joey", "value": 1 },
            { "name": "anne", "value": 2 },
            { "name": "paul", "value": 3 },
            { "name": "mike", "value": 4 }
        ]);
    };
    self.check = function () {
        alert(self.items().length);
    };
    self.total = ko.computed(function () {
        var total = 0;
        for (var i = 0; i < self.items().length; i++) {
            total += self.items()[i].value;
        }
        return total;
    });
};
var viewModel = new ViewModel();
ko.applyBindings(viewModel);

When I click on the Load button both the records and the total are displayed correctly, and when I click the Check button I get the correct item number.

However, if I change

self.items([
    { "name": "joey", "value": 1 },
    { "name": "anne", "value": 2 },
    { "name": "paul", "value": 3 },
    { "name": "mike", "value": 4 }
]);

to

self.items(ko.mapping.fromJS([
    { "name": "joey", "value": 1 },
    { "name": "anne", "value": 2 },
    { "name": "paul", "value": 3 },
    { "name": "mike", "value": 4 }
]));

the UI still get rendered correctly, but the total shows zero, clicking Check yields zero too, and console.info-ing self.items yields an empty array.

How is this possible? I've re-read the tutorials countless times, and I can't understand what I'm doing wrong.

P.s. I need to fill the observable array through the mapping plug-in because in the real page the values are coming from an AJAX request.

Answer 1

The issue that you are seeing is based on the fact that the mapping plugin will create an observableArray if it is given an array. So, you are setting the value of the self.items observableArray equal to an observableArray (rather than just an array). So, it is wrapped an extra time.

Here is one way to do it:

var ViewModel = function () {
    var self = this;
    self.items = ko.mapping.fromJS([]);
    self.load = function () {
        ko.mapping.fromJS([
            { "name": "joey", "value": 1 },
            { "name": "anne", "value": 2 },
            { "name": "paul", "value": 3 },
            { "name": "mike", "value": 4 }
        ], self.items);
    };
    self.check = function () {
        alert(self.items().length);
    };
    self.total = ko.computed(function () {
        var total = 0, items = self.items();
        for (var i = 0; i < items.length; i++) {
            total += items[i].value();
        }
        return total;
    });
};
var viewModel = new ViewModel();
ko.applyBindings(viewModel);

So, you initialize the original observableArray using the mapping plugin, so it is ready to be updated. Then, on the update you call ko.mapping.fromJS with the updated data and the the mapped object to update.

The other minor change at that point was just to use value() in your computed observable now that it is an observable from the mapping plugin.

Sample here: http://jsfiddle.net/rniemeyer/3La5K/

Answer 2

Or you could try knockout-data-projections

It hanldes view model to js arrays mappings quite well!!

Answer 3

You need to pass your items observableArray to the mapping function so that it can map the new values into it.

Working solution here: http://jsfiddle.net/unklefolk/j9pdX/

self.load = function () {
    ko.mapping.fromJS([
        { "name": "joey", "value": 1 },
        { "name": "anne", "value": 2 },
        { "name": "paul", "value": 3 },
        { "name": "mike", "value": 4 }
    ], {}, self.items);
};