Question

Hey Guys我现在正在使用Twitch Viewer进行编码和工作。（FreeCodeCamp）

我能够从JSON文件中获取信息并通过我的html代码显示它。但我的问题是我无法从我的游戏玩家那里获得名字。阵列。

为什么for循环在json函数中不起作用？

非常感谢你的帮助！

＆＃13;

var gamer = ["OgamingSC2","ESL_SC2"];

for(i=0;i<(2);i++){
  
$.getJSON('https://api.twitch.tv/kraken/streams/'+gamer[i]+'/?callback=?', function(json) {
  $('.list').append("<b>Name: " + gamer[i] + "</b><br>");
  var logo = json.stream.channel.logo;
  
  $('.list').append("Game: " + json.stream.channel.game + "<br>");
  $('.list').append("Status: " + json.stream.channel.status + "<br>");
  $('.list').append("Logo: " + "<img src=" + logo + ">" + "<br><br><br>");
  console.log(json);
});}

＆＃13;

img {
  width: 5em;
  border-radius: 10px;
}

＆＃13;

<head><script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> </head>
<body>
  <b>Twitch.tv JSON API</b> </br>
<div class="list"></div>
</body>

＆＃13;

Answer 1

这里发生的是$.getJson是一个异步调用，这意味着它只会在所有同步操作执行后执行。因此，for循环运行两次，并且两个getJSON回调函数被添加到函数堆栈中。

现在由于Javascript具有词汇或功能范围，因此变量i作为2存在于全局范围内（因为最终i++也已执行）。

接下来，回调函数逐个执行函数堆栈。但是，你的变量i现在是2！现在，回调函数只会看到gamer[2]不存在而且会抛出undefined

如果您在$ .getJSON中添加console.log(i)，则会看到它仅输出2两次。

为什么不试试这个：

＆＃13;

    var gamer = ["OgamingSC2","ESL_SC2"];
    gamer.map(function(gamer) {
      loopIt(gamer);
    });

  function loopIt(gamer) {
    
 
 $.getJSON('https://api.twitch.tv/kraken/streams/'+gamer+'/?callback=?', function(json) {
      $('.list').append("<b>Name: " + gamer + "</b><br>");
      var logo = json.stream.channel.logo;
      
      $('.list').append("Game: " + json.stream.channel.game + "<br>");
      $('.list').append("Status: " + json.stream.channel.status + "<br>");
      $('.list').append("Logo: " + "<img src=" + logo + ">" + "<br><br><br>");
    });

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head><script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> </head>
<body>
  <b>Twitch.tv JSON API</b> </br>
<div class="list"></div>
</body>

＆＃13;

Answer 2

我认为json什么都没有，因为你放了callback=? 当你通过？在回调变量中，它取值吗？什么都没有。所以只需将callback=。都给出任何值，然后再试一次。并且只是在函数中警告json变量。你会知道价值的来临与否。我没有发现循环和json链接没有错。

Answer 3

对于这种类型的服务器调用for循环，您可以使用自定义循环。

像这样，https://jsfiddle.net/s8eLhxpx/

    var gamer = ["OgamingSC2","ESL_SC2"];

     var initCounter = 0;
     callServerData()

     function callServerData(){
        $.getJSON('https://api.twitch.tv/kraken/streams/'+gamer[ initCounter ]+'/?callback=?', function(json) {
    $('.list').append("<b>Name: " + gamer[ initCounter ] + "</b><br>");
    var logo = json.stream.channel.logo;

     $('.list').append("Game: " + json.stream.channel.game + "<br>");
     $('.list').append("Status: " + json.stream.channel.status + "<br>");
     $('.list').append("Logo: " + "<img src=" + logo + ">" + "<br><br><br>");
      console.log(json);
      initCounter++
      if(initCounter < gamer.length){

        callServerData();
     }

});
}

为什么我的for循环不能在我的JSON函数中工作？

3 个答案: