title: How to call an ajax function in a for loop
body: <p>I'm new to ajax and JavaScript.
  What am trying to do is to call an ajax function several times to fetch certain data from a resource and then "push" all of the data into an array so that I can use it later on in the code. Here is my code.</p>
  
  <pre><code>var arr = [];
  var users = ["brunofin", "comster404", "ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
  
  for (i = 0; i &lt; users.length; i++) {
      $.ajax({
          url: "https://api.twitch.tv/kraken/streams/" + users[i],
          success: function(data) {
              arr.push(data);
          },
          error: function(data) {
              arr.push("blank");
          },
          complete: function() {
              if (i == users.length) {
                  console.log(arr); //This seem to print even when the condition isn't true
              }
          }
      });
  }
  </code></pre>
  
  <p>The problem with the code is that, it prints to the console even when <code>i</code> isn't equal to <code>users.length</code></p>
  
  <p>My question is; how do I make certain that it waits until <code>i == users.length</code> is true before it prints to the console?
  Please keep in mind that I still desire the process to be asynchronous.</p>