How to populate data in knockout js through ajax call

Question

I have an json object which I am responding from servlet to knockout js. I want to initialize this data in my view model for that I am writing this code.

success: function (data) 
{ 
    var jsondata = data['jsonObj'];
    self.PopulateStates = ko.computed(function(){
        ko.utils.arrayForEach(jsondata, function(item){
            self.States.push(new State(item));
        });
    }); 
}, 
error: function (exception) 
{ 
    alert( "fail" ); 
} 
});

My json object as string looks like this

{data:[{"id":"5345345","name":"dsfsdf","ssc":"","bic":"dgffdgfdg"},{"id":"123456","name":"SBI","ssc":"654321","bic":"vxvxc"}]}

js fiddle link is demo What is my mistake ? Or do I need to do it by mapping plugin of knockout js?

Answer 1

I use this knockout extension, declared before use.

ko.observableArray.fn.map = function (data, Constructor) {
    var mappedData = ko.utils.forEach(data, function () {
        return new Constructor(data);
    });

    this(mappedData);

    return this;
}

Then in my $.ajax request I do this:

success: function (data) 
{ 
    var jsondata = data['jsonObj'];
    self.PopulateStates = ko.observableArray().map(data, State);
}); 

You had the results in a computed observable which isn't what you need.

Another thing I have noticed is that your jsondata is set using the data that gets returned from the GET. You are asking that data for the field jsonObj however, looking at your JSON it seems you don't have this field. I think I am correct in saying you have data as the field with the list of items being returned.

If in your view model you have already declared self.PopulateStates which, I'm guessing you have. You can do this:

var State = function (data) {
    var self = this;

    self.property = ko.observable().set(data, "property");
}

var viewModel = function () {
    var self = this;
    self.PopulateStates = ko.observable();

    function getStates() {
        var request = $.ajax();

        request.done(function (data, msg) {
            if (data) self.PopulateStates.map(data, State);
        });
    }
}

If you notice in the State model I have self.property using a custom observable function to set it. All this does is if there is data to set the property to, set it. Otherwise give it a default value. I also have a third parameter that I use when I want it to construct an object for me using the data. This is when I have say, a contact, with a modifiedBy property and this modifiedBy is a user object (or just a complex object)

EDIT

The main thing, which isn't an error, but isn't necessary is the jQuery inclusion. Knockout is built to work independant of jQuery so where you do $(document).ready(function () {}) to make sure this loads on DOM ready isn't needed. This means you don't have to include jQuery if the page doesn't need it.

Here is the update fiddle , this will now work!