ループでAPIに複数のHTTP GETリクエストを送信する

Question

毎回異なるapi urlを使用してapiに多くのリクエストを送信する方法を探しています。私のプロジェクトのための 例のURLは次のとおりです。私は私のスクリプトにJSON情報を引き出すためにHTTPリクエストを使用して、完全に動作します...初めてだ http://api.bandsintown.com/artists/Hippo%20Campus/events.json?lapi_version=2.0&app_id=music_matcher

。しかし、私はそれを50-100 ish times（max）と呼ぶことができるようにするために、私はBandsInTown APIを使っています。何らかの理由で、HTTPリクエストを複数回呼び出すためにループを使用しようとすると、出力が1つしか表示されず、順序のどの要素が予測できないのですか（通常は配列の第1または第2要素）。これは私のコードは次のようになります。

// 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--- "); 
} 

だから私は起こっているのが、物事が私の現在のコードで奇妙な演技されている正確に何を言うことはできません。私はまだjavascriptとWeb開発の経験がたくさんあるわけではないので、どんな助けもありがとう！私は好ましくは純粋なjavascriptでこれを実装する方法を探していました。私はEclipse Neon（Nodeが使用しているIDE）でNode.jsやJQueryを処理する方法を見つけられませんでした。

Answer 1

あなたはクロージャーを非常によく実装しました。これは1つの関数の成功コールバックの問題あなたはそれがすべて明確になっdocument.write()を見たときに、今、すべてのothers.Butの応答を上書きし、この関数は、最初にきれいあなたの全体の内容は、それはあなたがほとんど誰でも使用を参照しない理由です何でも.Thatにそれを告げた書き込みワイプそれ

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

だから、ループが終わった後、あなたは最後のコールの出力しか見ることができません。どのコールが最後に終了するかは、ほとんどがランダムですが、ほとんどの場合、serv ersが調整されます。

だから、より良いアプローチはこの1つ

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

と

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]); 
} 

ようないくつかの <div>か何かを使用して、それにあなたの結果を注ぐことです