I am struggling to connect a KnockoutJS view model with a JSON string that represents a 2D array. Unfortunately, only the first level of the array is showing up.
Here is how my model is structured:
function CategoriesModel(categories) {
var self = this;
self.categories = ko.observableArray(ko.utils.arrayMap(categories, function (category) {
return {
description: category.description,
checks: ko.observableArray(category.checks)
};
}));
self.addCategory = function () {
self.categories.push({
description: "",
checks: ko.observableArray()
});
};
self.removeCategory = function (category) {
self.categories.remove(category);
};
self.addCheck = function (category) {
category.checks.push({
description: "",
keypoint: "",
penaltypoints: ""
});
};
self.removeCheck = function (check) {
$.each(self.categories(), function () {
this.checks.remove(check)
});
};
self.save = function () {
self.lastSavedJson(JSON.stringify(ko.toJS(self.categories), null, 2));
};
self.lastSavedJson = ko.observable("");
};
The issue arises when I attempt to bind the JSON data in the following method:
function loadData() {
var rawJSON = '[
{
"description":"01",
"checks":{"
description":"01",
"keypoint":"01",
"penaltypoints":"01"
}
},{
"description":"02",
"checks":{
"description":"02",
"keypoint":"02",
"penaltypoints":"02"
}
}
]';
var parsedJSON = JSON.parse(rawJSON);
viewModel.categories = ko.mapping.fromJSON(rawJSON);
ko.applyBindings(viewModel);
}
I would appreciate any insights on where I might be going wrong. Thank you for your help.
Edit: I attempted to create a jsfiddle (http://jsfiddle.net/EAu2E/4/) but it appears that knockout.js and knockout-mapping.js resources are not loading correctly.