How to put data into nested array and bind it to html in knockout.js?
How to put data into nested array and bind it to html in knockout.js?
1 answer
by
aniya.jaskolski ,
6 months ago
@muriel.schmidt
In order to put data into a nested array and bind it to HTML using Knockout.js, you can follow these steps:
- Define your data structure with nested arrays and objects:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
var viewModel = {
parentArray: [
{
name: "Parent 1",
childArray: [
{ name: "Child 1", value: 1 },
{ name: "Child 2", value: 2 }
]
},
{
name: "Parent 2",
childArray: [
{ name: "Child 3", value: 3 },
{ name: "Child 4", value: 4 }
]
}
]
};
|
- Create a Knockout.js view model using the ko.observableArray and ko.observable functions:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
var viewModel = {
parentArray: ko.observableArray([
{
name: "Parent 1",
childArray: ko.observableArray([
{ name: "Child 1", value: 1 },
{ name: "Child 2", value: 2 }
])
},
{
name: "Parent 2",
childArray: ko.observableArray([
{ name: "Child 3", value: 3 },
{ name: "Child 4", value: 4 }
])
}
])
};
|
- Bind the data to your HTML using Knockout.js bindings:
1 2 3 4 5 6 7 8 |
<div data-bind="foreach: parentArray">
<h3 data-bind="text: name"></h3>
<ul data-bind="foreach: childArray">
<li>
<span data-bind="text: name"></span> - <span data-bind="text: value"></span>
</li>
</ul>
</div>
|
- Apply the bindings to the HTML element:
1
|
ko.applyBindings(viewModel); |
With these steps, you can put data into nested arrays and objects, bind it to HTML using Knockout.js, and display the nested array data in your web application.
Related Threads:
How to put data into session array in symfony 5?
How to bind array of objects from promise knockout.js?
How to show nested array of json in html in ember.js?
How to get data via ajax in an html binding of knockout.js?
How to bind focusout event to knockout.js?
How to put nested json into d3.js table?