Ajax call with nested ajax calls in for each

Question

I'm experiencing the following problem.

I have the following nested / foreach loops ajax call structure:

var children = [];
$.fn.ajaxHelper.loadAjax({
    url: someUrlReturningJsonOfChildren,
    cache: true,
    callback: function(options) {
        var json = options.json;
        $.each(json, function (i) {
            // get the details of this child
            $.fn.ajaxHelper.loadAjax({
                url: urlForDetailsUsingId,
                cache: true,
                callback: function(options) {
                    var json = options.json;
                    children[i] = json;   
                }
            });
        }
    }
});
// want to do something with (newly filled) children here

As you can imagine, I'm running into the trouble that the ajax calls are asynchronous (duh), but I want to do something with the children array only when all the ajax calls are done. Otherwise I'm obviously dealing with an incomplete array.

I have been looking at some jQuery solutions such as Deferred objects (using $.when().then() and such), but that would only solve the problem if I would not have the foreach-loop (as far as I can tell).

Also, changing the REST API (where the ajax calls are going) is not an option unfortunately, due to specified requirements regarding the API.

Ok, so without further ado: can anyone of you geniuses help me with this? :-)

Answer 1

ajax is asynchronous by default but you can turn it off. Here goes the API on how to do it

https://api.jquery.com/jQuery.ajax/

heres a little demp

$.ajax({
   url: my_url.php,
   type: "POST",
   async: false,
   dataType: 'json'
});

Or just make your next ajax call in a success function ( Recommended )

function testAjax(handleData) {
   $.ajax({
   url:"getvalue.php",  

   success:function(data) {
      //next ajax call here
   }

 });
}

Answer 2

上一个查询成功完成时，您必须运行ajax查询（在jQuery onSuccess回调中）

Answer 3

I had a smiler issue... below is a simplified version of my solution.

Step one: Declare global variables.

var results1,
    results2,
    [resultsN];

Step two: Make a function that accepts the results of each AJAX call as parameters.

function foo(results1, results2, [resultsN]) {
    if (results1, results2, [resultsN]) {
        //... do whatever you want with all of your results
    }
}

Step three: Call all of the AJAX functions, set results to global variables, and call function foo for each.

function ajax() {
    //AJAX call 1
    $.ajax({
        type: 'POST',
        url: //URL,
        success: function (data, textStatus, jqXHR) {
            results1 = data;
        },
        dataType: 'json',
        complete: function () {
            foo(results1, results2);
        }
    });

    //AJAX call 2
    $.ajax({
        type: 'POST',
        url: //URL,
        success: function (data, textStatus, jqXHR) {
            results2 = data;
        },
        dataType: 'json',
        complete: function () {
            foo(results1, results2);
        }
    });
};

---

This method has the advantage of running as fast as the longest AJAX call takes. If you simply nest AJAX queries in the complete event then you will have to wait for each AJAX call to complete before moving to the next one...