Twitch TV API JSON 문제

Question

트 위치 API를 사용합니다. 스 트리머 스트림의 경우 속성 "스트림"으로 작업합니다. 하지만 스트리밍 중이 지 않다면 다른 링크를 참조해야합니다. 그런 다음 다시 getJSON 함수로 돌아가 필요한 API 링크를 전달합니다. 그리고 나는 그녀와 함께 일하고있다. 그러나 루프가 정상적으로 작동하지 않습니다. "채널"배열에서 마지막 스트리머를 가져 오지만 스트리밍하지 않은 모든 사람들이 사용해야합니다. 나는 그 문제가 무엇인지 이해할 수 없다. ...

JSFiddle 도움말 : https://jsfiddle.net/e7gLL25y/

JS Code: 

var getJSON = function(url, callback) { 
    var xhr = new XMLHttpRequest(); 
    xhr.open("GET", url, true); 
    xhr.onload = function() { 
     if(xhr.readyState == 4 && xhr.status == "200") { 
      callback(JSON.parse(xhr.responseText)); 
     } 
    }; 
    xhr.send(); 
}; 

var channels = ["summit1g", "esl_RuHub_CSGO", "Starladder1", "Senpai_Frozen", "tehvivalazz", "ESL_CSGO"]; 
var client_id = "hx3dea4ifwensxffoe8iwvekwvksnx"; 
var section = document.getElementById("main-section"); 

var streamer = []; 
for(var i = 0; i < channels.length; i++) { 

    var url_channels = "https://api.twitch.tv/kraken/channels/" + channels[i] + "?client_id=" + client_id; 
    var url_streams = "https://api.twitch.tv/kraken/streams/" + channels[i] + "?client_id=" + client_id; 

    getJSON(url_streams, function(response) { 
     if(response["stream"] !== null) { 
      streamer[i] = document.createElement("div"); 
      streamer[i].className = "streamer"; 
      streamer[i].innerHTML = "<a target='_blank' href='" + response.stream.channel["url"] + 
             "'><img id='streamer-image' src='" + 
             response.stream.channel["logo"] + 
             "' alt='Av' /><h2 id='streamer-name'>" + 
             response.stream.channel["name"] + 
             "</h2><p id='stream-status'>" + 
             response.stream["game"] + "</p></a>"; 
      section.appendChild(streamer[i]); 
     } else { 
      getJSON(url_channels, function(r) { 
       streamer[i] = document.createElement("div"); 
       streamer[i].className = "streamer"; 
       streamer[i].innerHTML = "<a target='_blank' href='" + r["url"] + 
              "'><img id='streamer-image' src='" + 
              r["logo"] + 
              "' alt='Av' /><h2 id='streamer-name'>" + 
              r["name"] + 
              "</h2><p id='stream-status'>Offline</p></a>"; 
       section.appendChild(streamer[i]); 
      }); 
     } 
    }); 

} 

Answer 1

을 당신은 자바 스크립트 컨텍스트에 대한 일반적인 오해를 가지고있다.

이 문제에 대한 자세한 내용을 보려면 여기를 내 대답을 참조하십시오 : 모든 배열이 반복 된 후 간단하게 getJSON 응답이라고

https://stackoverflow.com/a/42283571/1525495, 그래서 i는 모든 응답의 마지막 인덱스가됩니다. i 숫자를 계속 증가 시키려면 다른 컨텍스트를 만들어야합니다.

for(var i = 0; i < channels.length; i++) { 

    var url_channels = "https://api.twitch.tv/kraken/channels/" + channels[i] + "?client_id=" + client_id; 
    var url_streams = "https://api.twitch.tv/kraken/streams/" + channels[i] + "?client_id=" + client_id; 
    (function(i) { 
     // i will not be changed by the external loop as is in another context 
     getJSON(url_streams, function(response) { 
      // Thingy things... 
     }); 
    })(i); 

}