loading dropdown value from $getJSON

Question

I have a form with dropdowns and the page uses Knockout JS to bind data to html elements I have the below code to pre populate values from the database.

JS

    self.Irr = ko.observableArray([]);

    self.Crp = ko.observableArray([]);

    self.Incr = ko.observableArray([]);

    self.Brnd = ko.observableArray([]);

    self.Sec4 = ko.observableArray([]);

    $.getJSON("GetIrr", null, function (data) { self.Irr(data); })
        .done(function () {
            $.getJSON("GetCrp", null, function (data) { self.Crp(data); });
        })
        .done(function () {
            $.getJSON("GetTill", null, function (data) { self.Sec4(data); });
        })
        .done(function () {
            $.getJSON("GetBrnd", null, function (data) { self.Brnd(data); });
        })
        .done(function () {
            $.getJSON("GetIncr", null, function (data) { self.Incr(data); });
        })
        .done((function () {
            var request = $.ajax({
                type: "POST",
                dataType: 'json',
                url: "UserSavedData",
                data: { "InfoVal": $("#infoID").val() }
            });


            request.success(function (result) {

    // here i use the result data to get ids of the dropdown values and
    //fill the form

}

The data from the observable array does not get populated(unable to assign the result id object as the getjson respnonse needs more time to load I guess)due to network timing of the $getJSON calls how do I handle this

As per the suggestions I used the then() instead of done() but still having issues with data not being able to load(the one field that does not populate does show up when I place a break point and debug in chrome but when not debugging it doesnt show the value)

Answer 1

If you want your promises to chain sequentially, you need to use the .then() method and make sure you return any new promises from the success handlers in order to make them chainable.

$.getJSON('first')
  .then(function(){
     return $getJSON('second');
   })
   .then(function(){
     return $.getJSON('third');
   });

The code you have now will run all at once as soon as the first call is "done" because you aren't really chaining the promises, you are just adding a bunch of success handlers to the first promise.

Below is an example that shows the difference between the two approaches.

 (function(){ function sayHelloAsync(msg){ var def = jQuery.Deferred(); setTimeout(function(){ $("<div>" + msg + "</div>").appendTo("#messages"); def.resolve(); }, getRandomInt(300, 1500)); return def.promise(); } function clearMessages(){ $("#messages").html(''); } function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min)) + min; } function allAtOnce(){ clearMessages(); sayHelloAsync("first") .done(function(){ sayHelloAsync("second"); }) .done(function(){ sayHelloAsync("third"); }) .done(function(){ sayHelloAsync("fourth"); }); } function ordered(){ clearMessages(); sayHelloAsync("first") .then(function(){ return sayHelloAsync("second"); }) .then(function(){ return sayHelloAsync("third"); }) .then(function(){ return sayHelloAsync("fourth"); }); } $("#allAtOnce").on('click', allAtOnce); $("#ordered").on('click', ordered); }()); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="allAtOnce" type="button">All At Once</button> <button id="ordered" type="button">Ordered</button> <h2>Messages</h2> <div id="messages"> </div> 

Answer 2

+1 for Josh.

A more Knockout-y way would be to have each observable subscribe to the observable it depends on (note that you can just pass the observableArray as the success function, you don't need to wrap it).

self.Irr = ko.observableArray([]);
self.Crp = ko.observableArray([]);
self.Incr = ko.observableArray([]);
self.Brnd = ko.observableArray([]);
self.Sec4 = ko.observableArray([]);

$.getJSON("GetIrr", null, self.Irr);
self.Irr.subscribe(function () {
    $.getJSON("GetCrp", null, self.Crp);
});
self.Crp.subscribe(function () {
    $.getJSON("GetTill", null, self.Sec4);
});

etc.