binding json data using knockout - ajax

Question

i have a table that is "supposed" to be binded with the result of a json:
<table>
<thead>
<tr>
<th>
Id
</th>
<th>
Number
</th>
<th>
Name
</th>
<th>
Password
</th>
<th>
Role
</th>
</tr>
</thead>
<tbody data-bind="foreach: Employees">
<tr>
<td>
<span data-bind="text: EmployeeId"></span>
</td>
<td>
<span data-bind="text: EmployeeNumber"></span>
</td>
<td>
<span data-bind="text: EmployeeName"></span>
</td>
<td>
<span data-bind="text: EmployeePassword"></span>
</td>
<td>
<span data-bind="text: EmployeeRole"></span>
</td>
</tr>
</tbody>
my knockout script for that is this:
<script type="text/javascript">
$(document).ready(function () {
var viewModel = {};
var data = $.getJSON("Employees.json", function (data) {
viewModel.model = ko.mapping.fromJSON(data);
ko.applyBindings(viewModel);
}
);
});
</script>
i am trying to bind the table with the json result but it is not working, where could be the problem... here is my json in controller:
public ActionResult GetEmployees()
{
var r = db.Employees;
var s = new
{
Employees = r.Select(x => new { empId = x.Id, empName = x.Name, empNumber = x.Number, empPassword = x.Password, empRole = x.Role }).ToList()
.Select(x => new
{
EmployeeId = x.empId,
EmployeeName = x.empName,
EmployeeNumber = x.empNumber,
EmployeePassword = x.empPassword,
EmployeeRole = x.empRole
}).ToArray(),
};
return Json(s, JsonRequestBehavior.AllowGet);
}
UPDATE: here is my sample returned json data:
{"Employees":[{"EmployeeId":1,"EmployeeName":X","EmployeeNumber":"1","EmployeePassword":"x","EmployeeRole":"User"},{"EmployeeId":10,"EmployeeName":"S","EmployeeNumber":"21","EmployeePassword":"s","EmployeeRole":"Admin"}]}

Answer 1

Assuming everything server side is fine, your model is being bound to a .model property but so your foreach should be
<tbody data-bind="foreach: model.Employees">
That's all I can see right now, will need to see more code to help further.
You may want to use firebug or chrome dev tools and confirm what javascript errors you are receiving if any, also check the response to make sure your action method is returning data.
EDIT
OK here is a jsfiddle of your code. A few things, probably typos but just in case. Missing tag in your markup and there is a un-terminated comment in your json before the first EmployeeName.
http://jsfiddle.net/madcapnmckay/3rRUQ/1/
You do need to the model.Employees as stated above. Because you are returning json from mvc it will have the correct headers so jquery will convert it to a javascript object automatically so no need for the fromJSON, instead try fromJS.
Hope this helps.

Answer 2

<script id="tmpl_ScreenNavigation" type="text/html">
<tr class="erow">
{{if ScreenParentNevigationId}}
<td width="250px"><table cellpadding="5" class="Permission" sceenid="${ScreenNevigationId}" border="0" RoleDetailId="0"><tr><td><label><input type="checkbox" id="view${ScreenNevigationId}" class="View" /> View</label></td><td><label><input type="checkbox" id="AddModify${ScreenNevigationId}" class="Save"/> Add/Modify</label></td><td><label><input type="checkbox" id="Delete${ScreenNevigationId}" class="Delete" /> Delete</label></td></tr></table></td>
{{/if}}
{{if !ScreenParentNevigationId}}
<td {{if !ScreenParentNevigationId}} style="background-color: #F9BDC8;"{{/if}} width="250px"><table cellpadding="5" class="Permission" sceenid="${ScreenNevigationId}" border="0" RoleDetailId="0"><tr><td {{if !ScreenParentNevigationId}} style="background-color: #F9BDC8;"{{/if}}><label><input type="checkbox" id="view${ScreenNevigationId}" class="View" /> View</label></td></tr></table></td>
{{/if}}
<td {{if !ScreenParentNevigationId}} style="background-color: #F9BDC8;"{{/if}}>${ScreenName}</td>
<td {{if !ScreenParentNevigationId}} style="background-color: #F9BDC8;"{{/if}}>${ScreenDescription}</td>
</tr>
</script>
$("#tmpl_ScreenNavigation").tmpl(resultJson).appendTo("#tblRoles");

Answer 3

Change the location of your JavaScript tag to the top of the html file just above the table. The data might not be populating correctly because of that.