Sending multiple HTTP GET requests to api with a loop

Question

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: http://api.bandsintown.com/artists/Hippo%20Campus/events.json?lapi_version=2.0&app_id=music_matcher

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 BandsInTown API ). 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:

// 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 && 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&app_id=music_matcher";

httpGetAsync(url, function(data) {
    var numEvents = Object.keys(data).length;

    //var events = [];
    for (var j = 0; j < numEvents; j++) {
        document.write(data[j].venue.name + "-> ");
        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 < artists.length; i++) {
parseEvent(artists[i]);
document.write(" ---NEXT ARTIST--- ");
}

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)

Answer 1

You have implemented closure pretty well so clearly this isn't a problem of success callback of one function overwriting response of all others.But now when you look at document.write() it all gets clear, this function first wipes your whole content clean then it writes whatever you told it to .That's why you hardly see anyone use it

`document.write('a');`
`document.write('b');`
`document.write('c');` // a and b are gone you would see only 'c'

So after loop gets over you would only see the output of the last call.Though it's mostly random as to which call would finish last it mostly biased towards some particular value due to the the way servers are tuned.

So better approach is to use some <div> or something and pour your results into it like this one

<div id="op"></div>

and

function parseEvent(artist) {
    var url = "http://api.bandsintown.com/artists/" + artist + "/events.json?lapi_version=2.0&app_id=music_matcher";

    httpGetAsync(url, function(data) {
        var numEvents = Object.keys(data).length;
        var op = document.getElementById('op');
        op.innerHTML = op.innerHTML + "  <br><br> <h2>---NEXT ARTIST---<h2>  <br>";
        //var events = [];
        for (var j = 0; j < numEvents; j++) {
          op.innerHTML = op.innerHTML + "<br>" + data[j].venue.name + "-> ";
          op.innerHTML = op.innerHTML + "<br>" + "LAT:" + data[j].venue.latitude + " " + "LNG:" + data[j].venue.longitude ;
          op.innerHTML = op.innerHTML + "<br>" +"ARTIST: " + data[j].artists[0].name;
          op.innerHTML = op.innerHTML + "<br>" +"DATE: " + data[j].datetime;
          op.innerHTML = op.innerHTML + "<br>" + " " + j + " <br>"; 
        }
    }); 
}

var artists = ["Drake",  "Hippo Campus", "STRFKR","Mac Demarco"];

for (var i = 0; i < artists.length; i++) {
  parseEvent(artists[i]);
}