Knockout: Mapping/binding JSON - json

Question

I'm new to knockout. I'm trying to bind the json returned from ajax call but it isn't happening.
<script type="text/javascript">
var ServerData;
$(document).ready(function () {
ko.setTemplateEngine(new ko.nativeTemplateEngine);
var oViewModel = new CompanyModel();
oViewModel.Newitem(new Company("","","","","","","","","","","","","","",""));
ko.applyBindings(oViewModel);
BasicDatatable('#TableCompany');
});
function CompanyModel() {
var self = this;
self.CompanyList = ko.observable();
$.getJSON("getallcompanies", function (response) {
ServerData = ko.mapping.fromJSON(response);
self.CompanyList(ServerData);
});
}
In response I've the required data. But in ServerData I'm getting the following instead of the list.
function b() { if (0 < arguments.length) { if (!b.equalityComparer || !b.equalityComparer(d, arguments[0])) b.H(), d = arguments[0], b.G(); return this } r.T.Ha(b); return d }
Can You please let me know what's going wrong?

Answer 1

You should use ko.mapping.fromJS to bind JSON that comes from server.
Also, you don't need to define self.CompanyList = ko.observable(); and bind set value to that property in self.CompanyList(ServerData);.
It's all done by ko.mapping.fromJS. From Knockout Mapping documentation:
All properties of an object are converted into an observable. If an
update would change the value, it will update the observable.
Arrays are converted into observable arrays. If an update would
change the number of items, it will perform the appropriate
add/remove actions. It will also try to keep the order the same as
the original JavaScript array.
Try to change code like this:
function CompanyModel() {
var self = this;
$.getJSON("getallcompanies", function (response) {
ko.mapping.fromJSON(response, {}, self);
});
}