javascript 双 JSON 循环调用

Question

朋友，

目前我正在使用 json 实现 twitch.tv 应用程序作为我的 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 或 Mister Rogers 并只留下一个流光，它工作正常。但是两个或更多不起作用。我对 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();
});

javascript 双 JSON 循环调用

javascript double JSON call on the loop

javascript

jquery

json

twitch