javascript - FCC Twitch API 项目 : if-else inside for loop doesn't iterate through all possibilities

Question

所以我正在做 freeCodeCamp project显示有关特定流媒体的信息。我遇到了多个问题，涉及 for 循环内的 if 语句(我认为)。

首先，每个主播的状态始终为“离线”，其次，除了第一个之外， Logo 周围的边框不会改变。如果它有效，我仍然不确定边框颜色是否正确(红色表示离线流，绿色表示在线)。

如果你仔细观察，我所做的是为流媒体信息的每次迭代提供一个特定的 id，1 表示相应的图像，1 表示状态，这样我就可以在 if 语句中使用 i 变量来定位它们。

这是JS代码，使用我提供的链接通过Codepen可以更好地看到它，主要是因为你看到了整个工作，但我不知道如何正确格式化代码，这样你就不必使用水平滚动条看到长长的队伍。 :/

提前致谢!

$(document).ready(function() {

  var channels = ["freecodecamp", "wudijo", "ThijsHS", "HSdogdog", "Sjow"]; 

  for (var i = 0; i < channels.length; i++) {
       var channelURL = "https://wind-bow.gomix.me/twitch-api/channels/"+ channels[i] +"?callback=?";
       var streamURL = "https://wind-bow.gomix.me/twitch-api/streams/"+ channels[i] +"?callback=?";

   $.getJSON(channelURL, function(data1) {

     var logo = data1.logo;
     var name = data1.display_name;
     var twitchLink = data1.url;
     var status;

   $.getJSON(streamURL, function(data2) {

         if (data2.stream === null) {
           status = "Offline"; 
            }
         else {
           status = data2.stream.channel.status;
            }

    $("#followerInfo").append("<div class = 'row'><div class = 'col-md-4'><a href = '"+ twitchLink +"' target = 'blank'><img id = 'img"+ i +"' src = '"+ logo +"'></a></div><div class = 'col-md-4'><p>" + name + "</p></div><div class = 'col-md-4'><p id = 'status"+ i +"'>" + status + "</p></div></div>");

         if (data2.stream === null) {
           $("#img"+ i +"").addClass('img-offline');
          }
         else {
           $("#img"+ i +"").addClass('img-online');
          }

        });           
     });

 }

});

Answer 1

如果您console.log(channelURL)，您可以看到只有“Sjow”他的数据被调用。发生这种情况是因为循环在发出任何请求之前完成，因此仅使用数组中的最后一个值 (Sjow)。

您可以按照 this answer 修复此问题.