Twitch TV API JSON問題

我使用Twitch API工作。如果使用屬性「Stream」處理流媒體流。但是，如果他不是流媒體，那麼我需要參考另一個鏈接。然後，我再次轉向getJSON的功能並傳遞必要的API鏈接。我正在和她一起工作。但是，該循環無法正常工作。它將最後一個流媒體從「頻道」數組中取出，但它應該是所有不流式傳輸的。我無法理解問題是什麼。幫助...Twitch TV API JSON問題

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

}

來源

2017-03-07 Vitaliy

你了具有約JavaScript的上下文一個常見的誤解。

請參閱我的答案在這裏看到關於這個問題的詳細信息：https://stackoverflow.com/a/42283571/1525495

簡單地說，所有的數組循環後getJSON響應被調用，所以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); 

}

來源

2017-03-07 18:25:26

Twitch TV API JSON問題

回答

相關問題