爲什麼我的循環不能在我的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函數中工作？

回答

相關問題