title: How to make multiple AJAX requests and use all results from each request when available?
body: <p>I am trying to make two or more separate AJAX requests simultaneously or in parallel.<br>
  When all requests are finished and returned data for all AJAX requests, I want to call a function with all of the data at once.</p>
  
  <h2>So far:</h2>
  
  <ol>
  <li>Successfully making the separate AJAX requests and gathering data separately.  </li>
  <li>(Successfully?) make 2 parallel AJAX requests but when I try to access all of the data at once or send all the data to a function I get undefined:  </li>
  </ol>
  
  <h2>I have tried:</h2>
  
  <p>*Tried using the following style of AJAX:  </p>
  
  <pre><code>function Ajax(handleData) {
      $.ajax({
          url: url,  
          type: 'POST',
          data: data_ajax,
          success:function(data) {
              handleData(data);
          },
          error: function(e){
              console.log(e.message);
          }
      });
  }
  Ajax(function(output){
      response_parsed = JSON.parse(output);
      do stuff like assign to global var
  }
  </code></pre>
  
  <p>* Tried using the following style of AJAX:</p>
  
  <pre><code>get_array = (function(){
        var response_parsed;
        $.ajax({
           url: url,  
           type: 'POST',
           data: data_ajax,
           success:function(data) {
              response_parsed = JSON.parse(data);
           },
           error: function(e){
              console.log(e.message);
           },
        });
        return {getData : function()
        {
           if(response_parsed) return response_parsed;
        }};
     })();
  </code></pre>
  
  <p>where trying <code>get_array.getData</code> doesnt work out but <code>get_array</code> has the data in a <code>closure</code>? </p>
  
  <p><a href="https://i.stack.imgur.com/1oRUb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1oRUb.png" alt="enter image description here"></a></p>
  
  <p>How can I access the closure stuff?</p>
  
  <hr>
  
  <p>So basically, I have a function that calls the separate AJAX requests (which are separate functions) and then on success its supposed to either assign that data to a global var or send that data off to get processed and compiled:</p>
  
  <p>I tried assigning the response data to a global variable (I know everyone hates on global var) but I still couldnt use or pass that information to a function (undefined):</p>
  
  <pre><code>function start(){
      call_ajax1();
      call_ajax2();
      compile_data(data_array_from_request1, data_array_from_request2);
  }
  </code></pre>
  
  <p>I tried <code>return</code>ing the data on success.</p>
  
  <pre><code>function start(){
      data_array_from_request1 = call_ajax1();
      data_array_from_request2 = call_ajax2();
      compile_data(data_array_from_request1, data_array_from_request2);
  }
  </code></pre>
  
  <hr>
  
  <p>Need some guidance...<br>
  Do I need to chain successes together somehow?</p>
  
  <p>I found jQuery.when() recently but unsure if its what I am looking for.</p>
  
  <p>Please let me know how to improve this question.  </p>