Iterating in JSON using knockout.js - json

Question

I'm using Knockout.js to realize my web app.
I get data from a database and i use Json to pass data to html page that is rendered through data-bind.
I would like to set the more dynamic possible my app so i would like to iterate through json keys without "hardcoding" the field name
I have the following json: {"id_user":"63","email":"mail#email.it","flag":"1"}
and iterate using:
<table data-bind="foreach:page().users">
<tr>
<td data-bind="text:$data.email"></td>
<td data-bind="text:$data.flag"></td>
</tr>
</table>
but i would like to avoid the .email and .flag and using [0] or [1] to reuse this structure for all the models. How can i do it?

Answer 1

You could do this with a custom binding:
<table data-bind="foreach:page().users">
<tr data-bind="createHeaderRow: $data">
</tr>
<tr data-bind="createTableRow: $data">
</tr>
</table>
Then create these methods:
ko.bindingHandlers.createHeaderRow = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
for (var property in valueAccessor()) {
$(element).append('<td>' + property + '</td>');
}
}
};
ko.bindingHandlers.createTableRow = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
for (var property in valueAccessor()) {
$(element).append('<td data-bind="text: ' + property + '"></td>');
}
}
};
I've created a jsFiddle to demonstrate it too.

Answer 2

Here is some updated html to get a header and the rows with thead and tbody
<table class="table" >
<thead data-bind="with: page().users()[0]">
<tr data-bind="createHeaderRow: $data">
</tr>
</thead>
<tbody data-bind="foreach: page().users()">
<tr data-bind="createTableRow: $data">
</tr>
</tbody>
</table>