title: Sending multiple HTTP GET requests to api with a loop
body: <p>I'm looking for a way to send many requests to an api using a different api url each time.
  An example url for my project is:
  <a href="http://api.bandsintown.com/artists/Hippo%20Campus/events.json?lapi_version=2.0&amp;app_id=music_matcher" rel="nofollow noreferrer">http://api.bandsintown.com/artists/Hippo%20Campus/events.json?lapi_version=2.0&amp;app_id=music_matcher</a></p>
  
  <p>I'm using an HTTP request to pull the JSON info into my script and works perfectly...the first time. However, I want to be able to call it 50-100 ish times (max) in a loop with different artist names in the url (I'm using the <a href="https://www.bandsintown.com/api/requests#artists-events" rel="nofollow noreferrer">BandsInTown API</a>). For some reason, when I try to use a loop to call the http request multiple times, only one output appears and it is unpredictable which element in the order it will be (it's usually the output associated with the first or second element in the array). This is what my code looks like:</p>
  
  <pre><code>// HTTP GET call to BandsInTown API
  function httpGetAsync(theUrl, callback) { //theURL or a path to file
  var httpRequest = new XMLHttpRequest();
  httpRequest.onreadystatechange = function() {
      if (httpRequest.readyState == 4 &amp;&amp; httpRequest.status == 200) {
          var data = JSON.parse(httpRequest.responseText);
          if (callback) {
              callback(data);
          }                   
      }
      else {
          alert("error loading JSON doc");
      }
  };
  
  httpRequest.open('GET', theUrl, true); 
  httpRequest.send(null);
  }   
  
  
  
  //extracts data from api for each artist
  function parseEvent(artist) {
  var url = "http://api.bandsintown.com/artists/" + artist + "/events.json?lapi_version=2.0&amp;app_id=music_matcher";
  
  httpGetAsync(url, function(data) {
      var numEvents = Object.keys(data).length;
  
      //var events = [];
      for (var j = 0; j &lt; numEvents; j++) {
          document.write(data[j].venue.name + "-&gt; ");
          document.write("LAT:" + data[j].venue.latitude + " " + "LNG:" + data[j].venue.longitude);
          document.write("ARTIST: " + data[j].artists[0].name);
          document.write("DATE: " + data[j].datetime);
          document.write(" " + j + " "); 
      }
  }); 
  }
  
  var artists = ["Drake", "Mac Demarco", "Hippo Campus", "STRFKR"];
  
  
  for (var i = 0; i &lt; artists.length; i++) {
  parseEvent(artists[i]);
  document.write(" ---NEXT ARTIST--- ");
  }
  </code></pre>
  
  <p>So I can't tell exactly what's going on but things are acting weird with my current code. I don't have a whole lot of javascript and web development experience yet so any help is appreciated! I was preferably looking for a way to implement this with pure javascript. I have had trouble figureing out how to handle Node.js and/or JQuery in Eclipse Neon (the IDE I am using)</p>