jquery - Display dynamic knockout observable array in table -

jquery - Display dynamic knockout observable array in table -

given observable array 'samplelist' defined within viewmodel.

[ { name: abc, age: 40, interestlevel: { trekking: 50, hiking : 43 } }, { name: def, age: 34, interestlevel: { cricket: 55, cycling: 75 } } ]

how generate next table above info using ko custom binding or best possible way.

------------------------------------- name age involvement interestlevel ------------------------------------- abc 40 trekking 50 abc 40 hiking 43 def 34 cricket 55 def 34 cycling 75

[please note keys within interestlevel dynamic]. in advance.

first, you'll have de-normalize data:

this.tabledata = ko.computed(function() { var info = ko.unwrap(this.samplelist) var res = ko.observablearray(); (var in data) { (var il in data[i].interestlevel) { var ild = data[i].interestlevel[il]; res.push({ name: data[i].name, age: data[i].age, interest: il, interestlevel: ild }); } } homecoming res; }, this);

then bind table tabledata():

<table> <thead> <tr> <td>name</td> <td>age</td> <td>interest</td> <td>interest level</td> </tr> </thead> <tbody data-bind="foreach: tabledata()"> <tr> <td data-bind="text: name">name</td> <td data-bind="text: age">age</td> <td data-bind="text: interest">interest</td> <td data-bind="text: interestlevel">interest level</td> </tr> </tbody> </table>

see fiddle

jquery json table knockout.js