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

嘿，伙计们，我现在正在编码和工作在一个Twitch查看器。（FreeCodeCamp）为什么我的循环不能在我的JSON函数中工作？

我能够从JSON文件获取信息并通过我的html代码显示它。但我的问题是，我不能从我的“玩家”数组中获得名称。

为什么for循环无法在json函数中工作？

非常感谢您的帮助！

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); 
 
});}

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

<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>

来源

2016-08-25 aisen

使用'玩家[I] .name' –

因为'$ .json'是异步的，和'i'是不是你想的是，一旦你打'$ .json'回调... @AJ'我'仍然是错的：p –

@JaromandaX：是的，我错过了它。 *尴尬* –

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

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

接下来，回调函数逐个从函数堆栈中逐个执行。但唉，你的变量i现在是2！现在的回调函数只能看到gamer[2]不存在，这将引发一个undefined

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

你为什么不试试这个：

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>"); 
 
    }); 
 

 
}

<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>

来源

2016-08-25 06:17:38 nikjohn

谢谢你真正深入的解释！现在我明白发生了什么！非常感谢你！！！ – aisen

我认为它JSON给什么，因为你把callback=? 当你通过？在回调变量中它会带来什么价值？并且什么都不给。所以只是把callback= .dont给任何值，然后再试一次。并只是提醒json变量的功能。你会知道价值来临与否。我没有发现任何错误的循环和JSON链接。

来源

2016-08-25 06:25:56 Abhinav

对于此类型的服务器调用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(); 
    } 

}); 
}

来源

2016-08-25 06:27:40

非常感谢，这对我帮助很大！ – aisen

for循环不等待服务器响应，因此您得到未定义。 –

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

回答

相关问题