Can not data bind to table using knockout - data-binding

Question

//AJAX Webservice Call
ManualRegDiseaseData = $.parseJSON(rows.d);
var VM = new testView(ManualRegDiseaseData);
ko.applyBindings(VM);
var testView = function (DiseaseData) {
var self = this;
self.disease = ko.observableArray();
self.benefitData = ko.observableArray();
var sampleBenefit = [{ "Benefit": "Room", "Detail": "Ordinary", "Desc": "not herbal", "TotalDays": "2", "Remaining": "1000", "Claimed": "400", "Approved": "350", "Excess": "50" },
{ "Benefit": "Medicine", "Detail": "All", "Desc": "herbal", "TotalDays": "1", "Remaining": "2000", "Claimed": "800", "Approved": "600", "Excess": "100" }];
$.each(sampleBenefit, function (x, rowType) {
var obj = new BenefitObject();
obj.Benefit(rowType.Benefit);
obj.Detail(rowType.Detail);
obj.Desc(rowType.Desc);
obj.TotalDays(rowType.TotalDays);
obj.Remaining(rowType.Remaining);
obj.Claimed(rowType.Claimed);
obj.Approved(rowType.Approved);
obj.Excess(rowType.Excess);
self.benefitData.push(obj);
})
$.each(DiseaseData, function (x, rowType) {
var obj = new DiseaseObject();
obj.DiseaseCode(rowType.DiseaseCode);
obj.DiseaseName(rowType.DiseaseName);
self.disease.push(obj);
})
}
<table id="tblDisplayBenefit" class="">
<thead>
<tr>
<th>No.</th>
<th>Benefit </th>
<th>Detail </th>
<th>Description </th>
<th>Total Days </th>
<th>Remaining Inner Limit </th>
<th>Claimed </th>
<th>Approved </th>
<th>Excess </th>
<th>Reduce Max Limit </th>
</tr>
</thead>
<tbody data-bind="foreach: benefitData">
<tr>
<td data-bind="value: Benefit"></td>
<td data-bind="value: Detail"></td>
<td data-bind="value: Desc"></td>
<td data-bind="value: TotalDays"></td>
<td data-bind="value: Remaining"></td>
<td data-bind="value: Claimed"></td>
<td data-bind="value: Approved"></td>
<td data-bind="value: Excess"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6" style="text-align: right">Total</td>
<td>Total Claimed</td>
<td>Total Approved</td>
<td>Total Excess</td>
</tr>
</tfoot>
</table>
Those are my JS snippet code and my html, the problem is, I can not data bind the sample JSON variable into my table. It seems I can not push my data into benefitData object.
I have been doing console.log the rowType, the Json data is readable through the console.log.
I dont know, this must be a simple data binding, yet I dont know where is the fault part.
I cant figure this out.
Thanks in advance for the suggestion!

Answer 1

Use text binding instead of value for text int the table cells:
<td data-bind="text: Benefit"></td>
<td data-bind="text: Detail"></td>
<td data-bind="text: Desc"></td>
<td data-bind="text: TotalDays"></td>
<td data-bind="text: Remaining"></td>
<td data-bind="text: Claimed"></td>
<td data-bind="text: Approved"></td>
<td data-bind="text: Excess"></td>
Js Fiddle
According to knockout documentation
The value binding links the associated DOM element’s value with a
property on your view model. This is typically useful with form
elements such as input, select and textarea.
In other words it works with form elements and makes two-way binding, so when you change the value knockout automatically updates your ViewModel.
On the other hand, text binding
Typically this is useful with elements like span or em that
traditionally display text, but technically you can use it with any
element.
So you should use text binding here, because <td> element has static content.