Question

友

目前我正在使用json实现twitch.tv app作为我的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

1 个答案: