How to put data into nested array and bind it to html in knockout.js?

 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 }
            ]
        }
    ]
};

 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 }
            ])
        }
    ])
};

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>

1

ko.applyBindings(viewModel);