循环上的javascript双JSON调用

朋友们

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

$（文档）.ready（函数（）{
var streamerList=[“错误纠错器”、“freecodecamp”]；
getStream（streamrlist）；
});
函数getStream（streamrlist）{
对于（var k=0；k

---

在这个例子中，我使用了两个拖缆（freecodecamp和Mister Rogers），一个在线，另一个离线。然而，第二次json调用时的数据被弄乱了，在我的应用程序中，我看到它们都处于脱机状态。如果我移除freecodecamp或Mister Rogers，只留下一条拖缆，效果会很好。但有两个或更多的人不起作用。我对js很陌生，所以如果你能解释一下我的逻辑中的漏洞，我将非常感激。干杯。

我通过在互联网上找到的一些例子，自己解决了这个问题。这段代码的问题是在

$（document）.ready（function（）{}）

中，我将字符串数组

streamrlist

作为

getStream（）

函数的参数传递，但是，在第二次调用JSON时没有看到

streamrlist

变量（查看上面的代码）。因为该调用位于第一个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();
});

var streamerList=[“误码器”、“freecodecamp”]；
函数getStream（）{
streamerList.forEach（功能（通道）{
函数makeURL（类型、拖缆）{
返回(
"https://wind-bow.gomix.me/twitch-api/" +
类型+
"/" +
拖缆+
“？回调=？”
);
}
$.getJSON（makeURL（“流”，通道），函数（数据）{
var状态，博弈；
if（data.stream==null）{
status=“离线”；
game=“无可用内容”；
}else if（data.stream==未定义）{
status=“不可用”；
game=“频道关闭”；
}否则{
status=“在线”；
game=data.stream.game；
}
控制台日志（状态、游戏）；
$.getJSON（makeURL（“用户”，频道），函数（结果）{
var displayName=result.display\u name；
var logo=result.logo；
addRow（显示名称、徽标、状态、游戏）；
});
});
});
}
函数addRow（显示名称、徽标、状态、游戏）{
var divRow=document.createElement（“div”）；
divRow.className=“行”；
divRow.innerHTML=
'\
\
\\
\
' +
地位+
": " +
游戏+
'\
可能与参数的命名冲突。我相信内部函数调用的
数据
隐藏了外部
数据
变量。请尝试重命名其中一个变量，然后查看结果是否更改。不，重命名
数据
变量之一并不能解决问题。还有其他问题吗？
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();
});