javascript - 我如何才能通过

Question

var url1="https://wind-bow.glitch.me/twitch-api/streams/";
var channelList= ["channel1","channel2",channel3"];



//I am trying to create for loop to define url with different channel names.

for(var i=0;i<channelList.length;i++){
  var url="https://wind-bow.glitch.me/twitch-api/channels/" + channelList[i];
  $.getJSON(url1+channelList[i],function(data){

    //When the user click off button,I want to show offline channels.
    $("#off").on("click", () => {
      if(data.stream === null) {
        $.getJSON(url,function(seconddata){

          $("#main").append("<div class='row' style='margin-top:5px;'><div class='col-md-4'><p><img src='"+seconddata.logo+"'width='42' height='42'>"+"      "+"<a href='"+seconddata.url+"' target=_blank>"+seconddata.display_name+"</a></p></div></div>")   
      });
    }
  });      
});

你好，我真的是编码新手。现在我关注 FreeCodeCamp，并且正在为 Twitch 查看器项目而苦苦挣扎。但我被困在代码上了:) 我想创建一个 for 循环并使用 api 获取所有 channel 的数据。但我只得到最后一个 channel 的数据，因为“i”在 jquery 函数之外增加了。它没有通过 jquery 函数。我该如何解决？ :)

预先感谢您的回复。

注意:对不起我的英语。这不是我的母语。 :) 希望您能理解我的问题。

Answer 1

尝试类似以下代码片段的逻辑。

var url1="https://wind-bow.glitch.me/twitch-api/streams/";
var channelList= ["channel1","channel2","channel3"];

var allData = [];

//I am trying to create for loop to define url with different channel names.

for(var i=0;i<channelList.length;i++) {
  var url="https://wind-bow.glitch.me/twitch-api/channels/" + channelList[i];
  $.getJSON(url1+channelList[i],function(data){
    allData.push(data);
  });
};

   //When the user click off button,I want to show offline channels.
    $("#off").on("click", () => {
      for (var j=0;j<channelList.length; j++) {
        var data = allData[j];
        if(data.stream === null) {
        $.getJSON(url,function(seconddata){

          $("#main").append("<div class='row' style='margin-top:5px;'><div class='col-md-4'><p><img src='"+seconddata.logo+"'width='42' height='42'>"+"      "+"<a href='"+seconddata.url+"' target=_blank>"+seconddata.display_name+"</a></p></div></div>") 


        });
       }
    }
  });