Ajax consecutive calls within a loop.

Question

What is the best way to loop through the results of an ajax call, sending another ajax call, and using the result to draw a table ? I have enormous trouble using Jquery $.ajax within a loop. Even when I set async to false. I never really know when the last bit of data is available. I try to push all of the data to an object containing an array, but then I need to call the table to draw when the array is completely loaded.

var that = this;

jobdata.ajaxCall(function(json) {
        $.each(json, function(p, pitem) {

            var itemObj = that.getItembyId(pitem.ItemCode);
            if (itemObj === undefined)
            {
                itemObj = new Item(pitem.ItemCode);
            }
            itemObj.loadItemDetail(function() {
                that.itemlist.push(itemObj); 

            });


        }); 

Answer 1

Since you are returning a JSON string why not put the entire result in the JSON string. Then you only make a single AJAX call. The success callback will then be used to parse the JSON object and populate the table.

Maybe something like this:

  $.ajax({
       url: url,
       dataType: 'json',           
       success: callback
  });

  function callback(table){
       $.each(table.row, function(row){
           //process each row       
        });
  }