title: Ajax call with nested ajax calls in for each
body: <p>I'm experiencing the following problem.</p>
  
  <p>I have the following nested / foreach loops ajax call structure:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>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.</p>
  
  <p>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).</p>
  
  <p>Also, changing the REST API (where the ajax calls are going) is not an option unfortunately, due to specified requirements regarding the API.</p>
  
  <p>Ok, so without further ado: can anyone of you geniuses help me with this? :-)</p>