Невозможно получить доступ к глобальному массиву внутри функции $ .getJSON

Question

Я делаю «зрителя» для Twitch TV, который показывает, находятся ли телевизионные каналы в сети, в автономном режиме или не существуют. Я использую API для Twitch TV. Я сохранил имена каналов в массиве, но когда я пытаюсь добавить элемент массива к элементу HTML, он показывает «undefined». Массив является глобальной переменной.

Мой код: in this fiddle.

HTML:

<div class="container-fluid"> 

<div class="row row-centered"> 

<div class="col-md-4"></div> 
<!-- This is a div containing divs for each channel --> 
<div class="col-md-4 col-centered" id="displayHere"> 


</div> 
<!-- The container div end here --> 
<div class="col-md-4"></div> 

</div> 

</div> 

Мои Javascript:

$(document).ready(function(){ 
streamsArr= ["ESl_SC2","OgamingSC2","cretetion","freecodecamp","storbeck","habathcx","RobotCaleb","noobs2ninjas","brunofin","comster404"]; 

for(var count=0;count<streamsArr.length;count++){ 
$.getJSON("https://api.twitch.tv/kraken/streams/"+streamsArr[count]+"?callback=?",function(data){ 

    if(JSON.stringify(data.stream)=="null") 
    { 
     $("#displayHere").append("<div style=\"padding:1%;\"><span style=\"font-size:1.3em;\"> "+streamsArr[count]+"</span><span style=\"color:red;\">OFFLINE</span></div>");//shows 'undefined' 
    } 
    else if(data.hasOwnProperty("error")) 
    { 
     $("#displayHere").append("<div style=\"padding:1%;\"><span style=\"font-size:1.3em;\"> "+streamsArr[count]+"</span><span style=\"color:red;\">UNAVAILABLE</span></div>");//shows 'undefined' 
    } 
    else{ 
    $("#displayHere").append("<div style=\"padding:1%;\"><span style=\"font-size:1.3em;\"> "+JSON.stringify(data.stream.channel.display_name)+"</span>"+JSON.stringify(data.stream.game)+"</div>"); 
    } 
}); 
} 
}); 

Может кто-нибудь сказать мне, где вина лежит? Благодарю.

Answer 1

Вы создали закрытие для переменной count поскольку JavaScript имеет функцию сферы, поэтому значение переменной счетчика всегда 10. С ES6, вы можете использовать let вместо var в цикл так count будет блочный.

Answer 2

Попытаемся очистки функцию $.getJSON немного первый:

var twitchAPI = "https://api.twitch.tv/kraken/streams/"+streamsArr[count]+"?callback=?" 

, а затем инкапсулировать обратный вызов в замыкании, который имеет индекс, связанный с ним:

$.getJSON(twitchAPI, function(count) { 
    return function(data) { 
     if (JSON.stringify(data.stream) == "null") { 
      $("#displayHere").append("<div style=\"padding:1%;\"><span style=\"font-size:1.3em;\"> " + streamsArr[count] + "</span><span style=\"color:red;\">OFFLINE</span></div>"); 
     } else if (data.hasOwnProperty("error")) { 
      $("#displayHere").append("<div style=\"padding:1%;\"><span style=\"font-size:1.3em;\"> " + streamsArr[count] + "</span><span style=\"color:red;\">UNAVAILABLE</span></div>"); 
     } else { 
      $("#displayHere").append("<div style=\"padding:1%;\"><span style=\"font-size:1.3em;\"> " + JSON.stringify(data.stream.channel.display_name) + "</span>" + JSON.stringify(data.stream.game) + "</div>"); 
     } 
    } 
}(count)); 

Answer 3

$.getJSON метод является асинхронный, так что цикл For может завершиться до того, как текущий запрос вернет результат. Таким образом, значение переменной count становится 10.

Вот скрипка, которая работает https://jsfiddle.net/bkw5dLac/1/

$(document).ready(function(){ 
 
streamsArr= ["ESl_SC2","OgamingSC2","cretetion","freecodecamp","storbeck","habathcx","RobotCaleb","noobs2ninjas","brunofin","comster404"]; 
 

 
for(var count=0;count<streamsArr.length;count++){ 
 
getJSON(streamsArr[count]); 
 
} 
 
}); 
 

 
function getJSON(arr){ 
 
$.getJSON("https://api.twitch.tv/kraken/streams/"+arr+"?callback=?",function(data){ 
 
    if(JSON.stringify(data.stream)=="null") 
 
    { 
 
     $("#displayHere").append("<div style=\"padding:1%;\"><span style=\"font-size:1.3em;\"> "+arr+"</span><span style=\"color:red;\">OFFLINE</span></div>");//shows 'undefined' 
 
    } 
 
    else if(data.hasOwnProperty("error")) 
 
    { 
 
     $("#displayHere").append("<div style=\"padding:1%;\"><span style=\"font-size:1.3em;\"> "+arr+"</span><span style=\"color:red;\">UNAVAILABLE</span></div>");//shows 'undefined' 
 
    } 
 
    else{ 
 
    $("#displayHere").append("<div style=\"padding:1%;\"><span style=\"font-size:1.3em;\"> "+JSON.stringify(data.stream.channel.display_name)+"</span>"+JSON.stringify(data.stream.game)+"</div>"); 
 
    } 
 
}); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-fluid"> 
 

 
<div class="row row-centered"> 
 

 
<div class="col-md-4"></div> 
 
<!-- This is a div containing divs for each channel --> 
 
<div class="col-md-4 col-centered" id="displayHere"> 
 

 

 
</div> 
 
<!-- The container div end here --> 
 
<div class="col-md-4"></div> 
 

 
</div> 
 

 
</div>

код Почему OP не работает, как ожидалось

1) Variable count является глобальной переменной для a функция обратной переадресации в $.getJSON

2) $ .getJSON является асинхронным. Таким образом, анонимная функция обратного вызова запускается только после успешного получения запроса.

3) Когда выполняется анонимный обратный вызов, значение count будет изменено в цикле for. Во многих случаях это становится 10. Поскольку цикл завершает выполнение до обратного вызова срабатывает

Почему моя скрипка работает

1) Я передал значение streamArr в count локальную переменную arr.

2) Поскольку arr является локальной переменной для функции getJSON, ее значение не будет изменено в цикле for. Таким образом, анонимная функция обратного вызова работает так, как ожидалось.