Knockout nested model properties - json

Question

I need a feature like a repeating table in my web form and need to store my data in a JSON format like this:
[
{
"id": 1, "name": "T01", "title": "T01 form title", "totalPoints": "total of all points for sections below",
"sections":
[
{ "section": "First section", "point": 4 },
{ "section": "Second section", "point": 5 }
]
},
{
"id": 2, "name": "T02", "title": "T02 form title", "totalPoints": "total of all points for sections below",
"sections":
[
{ "section": "First section", "point": 4 },
{ "section": "Second section", "point": 5 }
]
}
]
I'm using knockout and I implemented top level of the structure below, but struggling with a nested sections.
Here is my attempts to structure my Model, please advise what option to use, or if this incorrect, please advise the right option:
function Form(data)
{
this.Id = ko.observable(data.Id);
this.Name = ko.observable(data.Name);
this.Title = ko.observable(data.Title);
this.Total = ko.observable(data.Total);
// Option 1, like an array
this.Sections = ko.observableArray([
{
Section: data.Section,
Point: data.Total
}
]);
// Option 2, like a function
function Sections(data) {
this.Section = ko.observable(data.Section),
this.Point = ko.observable(data.Point)
}
}
Later I push this data as a model to observable array like this, again I can push the top level, but couldn't nested properties:
self.addForm = function () {
self.forms.push(
new Form({
Id: this.id(),
Name: this.name(),
Title: this.title(),
Total: function() // TODO
// Sections nested properties implementation
})
);
self.name("");
};

Answer 1

I'd say it's best to define two viewmodels:
Form, and
Section
Your Form will have three kinds of properties:
Regular ko.observable values, for Id, Name and Title
Note: If some of those are static, it's best to not make them observable. I can imagine the Id will never change: you can signal this to other readers of your code by making it a regular string.
An observableArray for your list of Sections
A pureComputed for Total that sums up all your Section points
function Section(points, title) {
// TODO: check if you need these to be observable
this.points = points;
this.title = title;
};
// Create a new Section from a plain object
Section.fromData = function(data) {
return new Section(data.point, data.section);
};
function Form(id, name, title, sections) {
this.id = ko.observable(id);
this.name = ko.observable(name);
this.title = ko.observable(title);
// Map using our static constructor helper
this.sections = ko.observableArray(
sections.map(Section.fromData)
);
this.total = ko.pureComputed(function() {
return this.sections().reduce(function(sum, section) {
return sum + section.points;
}, 0);
}, this);
}
// A helper to get from your data object to a new VM
Form.fromData = function(data) {
return new Form(data.id, data.name, data.title, data.sections);
}
// Apply bindings
ko.applyBindings({
forms: getTestData().map(Form.fromData)
});
// Your test data
function getTestData() {
return [{
"id": 1,
"name": "T01",
"title": "T01 form title",
"totalPoints": "total of all points for sections below",
"sections": [{
"section": "First section",
"point": 4
},
{
"section": "Second section",
"point": 5
}
]
},
{
"id": 2,
"name": "T02",
"title": "T02 form title",
"totalPoints": "total of all points for sections below",
"sections": [{
"section": "First section",
"point": 4
},
{
"section": "Second section",
"point": 5
}
]
}
]
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<ul data-bind="foreach: forms">
<li>
<p data-bind="text: title"></p>
<ul data-bind="foreach: sections">
<li>
<span data-bind="text: title"></span> (
<span data-bind="text: points"></span>)
</li>
</ul>
<span data-bind="text: 'total: (' + total()"></span>)
</li>
</ul>
The Section class is a bit plain; if you don't have additional requirements you could choose to use plain objects instead.