为什么我的 for 循环不能为我的 JSON URL 建立索引？答案

【问题标题】：Why my for loop is not working for indexing my JSON URL?为什么我的 for 循环不能为我的 JSON URL 建立索引？
【发布时间】：2018-01-15 21:50:27
【问题描述】：

$(document).ready(function() {
  var streamers = ["freecodecamp", "OgamingSC2", "cretetion", "ESL_SC2", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
  var status;
  for (var i = 0; i < streamers.length; i++) {
    var url = "https://wind-bow.glitch.me/twitch-api/streams/" + streamers[i];
    $.getJSON(url, function(data) {
      if (data.stream === null) {
        status = "Offline";
        var url2 = "https://wind-bow.glitch.me/twitch-api/channels/" + streamers[i] + "";
        $.getJSON(url2, function(data2) {
          $("#container").append('<div class="row"><div class="col-sm-4"><img class="img-circle img-responsive" src="' + data2.logo + '"></div><div class="col-sm-4"><h2>' + data2.name + '</h2><p></div><div class="col-sm-4"><h2>' + status + '</h2></div></div><hr>');
        });
      } else {
        console.log(data);
      }
    });
  }
});

for 循环不适用于索引我的 JSON URL。另外，是否有任何有效的方法来代替使用两个 getJSON 请求？

【问题讨论】：

标签： javascript jquery json dom

【解决方案1】：

因为$.getJSON(url, function(data) { ... 是异步调用，并且在您的循环已经结束时及时解决。

【讨论】：

【解决方案2】：

for-loop 甚至在第一个回调被执行之前运行完成。这意味着第一次调用你的内部函数时，变量i 等于streamers.length。

解决方案是在新变量中制作i 的本地副本，并在回调中使用这些副本。使用let 可确保每个变量都是单独的副本，而不是重复使用的变量。

$(document).ready(function() {
    var streamers = ["freecodecamp", "OgamingSC2", "cretetion", "ESL_SC2", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
    var status;
    for(var i = 0; i < streamers.length; i++)
    {
        let j = i; // create local copy to store value of i.
        var url = "https://wind-bow.glitch.me/twitch-api/streams/" + streamers[j];
        $.getJSON(url, function(data) {
            if(data.stream ===  null) {
                status = "Offline";
                var url2 = "https://wind-bow.glitch.me/twitch-api/channels/" + streamers[j] + "";
                $.getJSON(url2, function(data2) {
                    $("#container").append('<div class="row"><div class="col-sm-4"><img class="img-circle img-responsive" src="' + data2.logo + '"></div><div class="col-sm-4"><h2>' + data2.name + '</h2><p></div><div class="col-sm-4"><h2>' + status + '</h2></div></div><hr>');
                });
            }
            else
            {
                console.log(data);
            }
        });
    }   
});

【讨论】：

【解决方案3】：

当你在第6行的ajax请求回调执行时，for循环已经结束，你使用var清除的全局变量url的值是urlPrefix + arr[the last index]，所以回调请求中的所有ajax都是一样的网址。

您可以阅读此doc about closure 以了解您的代码为何以这种方式运行。

【讨论】：

【解决方案4】：

重新排列您的代码以使用 then 而不是成功回调并尝试：

        $(document).ready(function () {
            var streamers = ["freecodecamp", "OgamingSC2", "cretetion", "ESL_SC2", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
            var status;
            for (var i = 0; i < streamers.length; i++) {
                var url = "https://wind-bow.glitch.me/twitch-api/streams/" + streamers[i];

                $.getJSON(url).then(function (data) {
                    if (data.stream === null) {
                        status = "Offline";
                        var url2 = "https://wind-bow.glitch.me/twitch-api/channels/" + streamers[i] + "";
                        $.getJSON(url2).then(function (data2) {
                            $("#container").append('<div class="row"><div class="col-sm-4"><img class="img-circle img-responsive" src="' + data2.logo + '"></div><div class="col-sm-4"><h2>' + data2.name + '</h2><p></div><div class="col-sm-4"><h2>' + status + '</h2></div></div><hr>');
                        });
                    } else {
                        console.log(data);
                    }
                });
            }
        });

【讨论】：