This is the jsfiddle I'm referring to: http://jsfiddle.net/utdAm/212/
I just need to show the same table in my web page. But it just shows the headings in html not the content which is processed in JavaScript.
My complete code:
<!DOCTYPE HTML>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
<body>
<table>
<tr>
<th>Day</th>
<th>M</th>
<th>T</th>
<th>W</th>
<th>T</th>
<th>F</th>
</tr>
<tbody data-bind="foreach: prayerData">
<tr>
<td data-bind="text: index"></td> <!-- Display the current row -->
<td data-bind="text: M"></td>
<td data-bind="text: T"></td>
<td data-bind="text: W"></td>
<td data-bind="text: T"></td>
<td data-bind="text: F"></td>
</tr>
</tbody>
</table>
<script>
var dataFromServer = {
"Morn.": {
"M": "M,1",
"T": "T,1",
"W": "W,1",
"T": "T,1",
"F": "F,1"
},
"Noon": {
"M": "M,2",
"T": "T,2",
"W": "W,2",
"T": "T,2",
"F": "F,2"
},
"Even.": {
"M": "M,3",
"T": "T,3",
"W": "W,3",
"T": "T,3",
"F": "F,3"
},
};
var ViewModel = function(data) {
//map data to an array
var mappedToArray = [];
$.each(data, function(index, item) {
mappedToArray.push(item);
item.index = index;
});
this.prayerData = ko.observableArray(mappedToArray);
};
ko.applyBindings(new ViewModel(dataFromServer));
</script>
</body>
</html>
Result is: