how to access observable arrays in knockout using mapping funcion

Question

I am using knockout.js' mapping function to map a json object i am receiving from my server side asp.net application. Using Chrome's debugger i can view that the json object is being received just fine, however when i use ko.mapping.fromJS to create an observable object, all the internal observable arrays show up as length 0. Within QCTest there are multiple arrays.

var testDefJSON = getTestDefJSON();
var ViewModel = function () {
    var self = this;
    self.QCtest = ko.mapping.fromJS(testDefJSON);
    self.hasBuiltNewGroup = ko.observable(false);
    self.selectedOp = ko.observable();
    self.selectedUom = ko.observable();
    self.addTestGroup = function () {
        show_modal("createGroupModal");
    };
    self.saveTest = function () {
        var jsData = ko.toJS(ViewModel);
        var json = JSON.stringify(jsData);
        $.ajax({
            type: 'POST',
            url: '/Test/SaveTest',
            async: false,
            data: json,
            contentType: "application/json",
            success: function (result) { alert(result) },
            error: function () { alert("failed to post test data"); }
        });
    };
    self.delItems = function () {
        alert(self.QCtest.QCTestGroups.length);
    };
    self.closeItemModal = function () {
        ViewModel.hasBuiltNewGroup(false);
        close_modal();
    };
    self.createNewGroup = function () {
        ViewModel.hasBuiltNewGroup(true);
    };
    self.addNewTestItem = function () {
        alert("Adding new test item button works");
    };
};
var viewModel = new ViewModel();
ko.applyBindings(viewModel);

All of my UI elements show up just as they should when using a foreach/template over the internal arrays. Yet when i click on my delItems button the alert pops up and states that the internal array QCTestItems has a length of 0 when it should be at least 1 (however many test items are in the array).

I need to be able to remove the items that are checked when you press the delItems button. To do this i need access to the elements in that array and since its coming up as length 0, it is making it difficult to do that.

Any help would be much appreciated

EDIT:

changed self.delItems = function () { alert(self.QCtest.QCTestGroups.length); }; to self.delItems = function () { alert(self.QCtest.QCTestGroups().length); };

and now it works

John Earles John Earles · Accepted Answer · 2012-11-20T00:23:04

The mapping plugin will transform your JSON into Observables. An Observable (including an ObservableArray) is a function, so make sure you use the () form to access the actual value:

alert(self.QCtest().QCTestGroups().length);

Here is a fiddle to demonstrate: http://jsfiddle.net/jearles/cH7h3/

Click the button once the Options have loaded. An alert is shown showing two length values, one directly accessing the array (which will show a length of 0) and one accessing the internal array (which will show the real length of 2).

how to access observable arrays in knockout using mapping funcion

1 Answers