javascript双JSON呼叫循环

Question

朋友，

目前我正在实施twitch.tv应用程序使用json作为我的freecodecamp课程的一部分。使用twitch api，我必须调用json两次，以获取用户和流数据。我也在循环中这样做，因为我有多个拖放器需要遵循。在这里你可以看到我的code。

$(document).ready(function() { 
var streamerList = ["MisterRogers","freecodecamp"]; 
getStream(streamerList); 
}); 

function getStream(streamerList) { 
for (var k = 0; k < streamerList.length; k++) { 
var userURL = makeURL("users", streamerList[k]); 
var streamURL = makeURL("streams", streamerList[k]); 
    $.getJSON(userURL, function(data) { 
    var displayName = data.display_name; 
    var logo = data.logo; 
    $.getJSON(streamURL, function(data){ 
     var status, game; 
     console.log(data); 
     if (data.stream === null){ 
     status = 'Offline'; 
     game = 'No Content Available'; 
     } else if (data.stream === undefined){ 
     status = 'Not available' 
     game = 'Channel Closed'; 
     } else { 
     status = 'Online'; 
     game = data.stream.game; 
     } 
     addRow(displayName, logo, status, game); 
    }); 
    }); 
} 
} 

在这个例子中，我使用了两个拖放器（freecodecamp和Mister Rogers），其中一个在线，另一个在线。然而，第二次json调用中的数据正在混乱，在我的应用程序中，我将它们视为离线。它的工作很好，如果我删除freecodecamp或罗杰斯先生，只留下一个流光。但是两个或更多不起作用。我对js很陌生，所以如果你能解释我逻辑上的差距，我会非常感激。干杯。

Answer 1

我设法通过我在互联网上找到的一些例子来解决这个问题。这个代码的问题是，在$(document).ready(function(){})我传递字符串数组streamerList作为getStream()函数的参数，然而，streamerList变量在JSON的第二次调用（查看上面的代码）中看不到。因为那个调用是在第一个JSON调用的函数中。由于这个原因，第二次调用中的streamURL变为undefined。为了解决这个问题，我必须使变量streamerList全局并运行foreach循环。这里是我的工作解决方案：

var streamerList = ["MisterRogers", "freecodecamp"]; 

function getStream() { 
    streamerList.forEach(function(channel) { 
     function makeURL(type, streamer) { 
      return (
      "https://wind-bow.gomix.me/twitch-api/" + 
      type + 
      "/" + 
      streamer + 
      "?callback=?" 
      ); 
     } 
    $.getJSON(makeURL("streams", channel), function(data) { 
     var status, game; 
     if (data.stream === null) { 
      status = "Offline"; 
      game = "No Content Available"; 
     } else if (data.stream === undefined) { 
      status = "Not available"; 
      game = "Channel Closed"; 
     } else { 
      status = "Online"; 
      game = data.stream.game; 
     } 
     console.log(status, game); 
     $.getJSON(makeURL("users", channel), function(result) { 
      var displayName = result.display_name; 
      var logo = result.logo; 
      addRow(displayName, logo, status, game); 
     }); 
    }); 
}); 
} 
function addRow(displayName, logo, status, game) { 
    var divRow = document.createElement("div"); 
    divRow.className = "row"; 
    divRow.innerHTML = 
     '<div class="col-md-4"></div>\ 
     <div class="col-md-1"><img src="' + 
     logo + 
     '"/></div>\ 
     <div class="col-md-3"><blockquote>\<p>\ 
     <a href="http://www.twitch.tv/' + 
     displayName + 
     '" target="_blank">' + 
     displayName + 
     '</a></p>\ 
     <footer><cite title="Source Title">' + 
     status + 
     ": " + 
     game + 
     '</cite></footer></blockquote></div>\ 
     <div class="col-md-1></div>'; 
    document.getElementById("content").appendChild(divRow); 
} 

$(document).ready(function() { 
    getStream(); 
});