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(); 
});