すべてのJSONが表示されない

Question

"cretetion"関連のリンクJSONが他のものが上書きされるため常に表示されます。だから私はそれらのすべてを得るために増分を試みたが、うまくいかなかった。私は何が間違っているのか分からない。

var users = ["ESL_SC2", "OgamingSC2", "cretetion"]; 

function loadXMLDoc() { 
    var xmlhttp = new XMLHttpRequest(); 
    for (var i = 0; i < users.length ; i++) { 
     var url = "https://wind-bow.glitch.me/twitch-api/streams/" + users[i]; 
    xmlhttp.onreadystatechange = function() { 
    if (xmlhttp.readyState == XMLHttpRequest.DONE) { 
     if (xmlhttp.status == 200) { 
     document.getElementById('online-id').innerHTML += (xmlhttp.responseText + "<br />"); 
     }else if (xmlhttp.status == 400) { 
     console.log('There was an error 400'); 
     }else { 
     console.log('Something else other than 200 was returned.'); 
     } 
    } 
    } 

    xmlhttp.open("GET", url, true); 
    xmlhttp.send(); 
    } 
} 

var onlineButton = document.getElementById('online-button-id'); 
onlineButton.addEventListener('click', loadXMLDoc, false); 

Answer 1

私はここにあなたのコードを修正しました： https://plnkr.co/edit/VbkKc9QuVALAYLpujSdo?p=preview

まず、コールバックxmlhttp.onreadystatechangeは、最後の要素だけが処理されますので、ループの反復ごとに上書きされます。 ループ内にXMLHttpオブジェクトを作成して管理する必要があります.1つはユーザー配列の各要素用です。

xmlhttp.onreadystatechangeを即時呼び出し関数内にラップする必要があります。それ以外の場合は、それぞれのコールバックで最後のxmlhttpオブジェクトが使用されます。上記のように、常に最後の結果が得られます。

for (var i = 0; i < users.length ; i++) { 
var xmlhttp = new XMLHttpRequest(); 
var url = "https://wind-bow.glitch.me/twitch-api/streams/" + users[i]; 

    (function(xmlhttp){ 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == XMLHttpRequest.DONE) { 
     if (xmlhttp.status == 200) { 
      document.getElementById('online-id').innerHTML += (xmlhttp.responseText + "<br/><br/>"); 
     }else if (xmlhttp.status == 400) { 
      console.log('There was an error 400'); 
     }else { 
      console.log('Something else other than 200 was returned.'); 
     } 
     } 
    } 
})(xmlhttp) 

xmlhttp.open("GET", url, true); 
xmlhttp.send(); 

} 

Answer 2

同じループを繰り返し使用する代わりに、ループの繰り返しごとに新しいXMLHttpRequestを作成してみてください。すなわち

function loadXMLDoc() { 
    for (var i = 0; i < users.length ; i++) { 
    var xmlhttp = new XMLHttpRequest(); 
    ...