$ .getJSON 함수 내에서 전역 배열에 액세스 할 수 없습니다.

Question

TV 채널이 온라인, 오프라인 또는 존재하지 않는지 보여주는 Twitch TV 용 '뷰어'를 만들고 있습니다. Twitch TV 용 API를 사용하고 있습니다. 배열에 채널 이름을 저장했지만 배열 요소를 HTML 요소에 추가하려고하면 '정의되지 않음'이 표시됩니다. 배열은 전역 변수입니다.

내 코드는 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> 

내 자바 스크립트 : 오류가 자리하고있는 곳

이 가

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

당신은 자바 스크립트 카운트 변수의 값은 항상 ES6 10. 이유입니다 기능 범위를 가지고 있기 때문에 count이 될 것입니다, 당신은 for 루프에서 let 대신 var를 사용할 수있는 변수 count에 대한 폐쇄를 만들었습니다 블록 범위.

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

을 한 다음에 바인딩 된 인덱스가있는 폐쇄에 성공 콜백 캡슐화 :

Answer 2

의 처음 비트를 $.getJSON 기능을 정리 해보자

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

는

1) 변수를 예상대로 작동하지 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>

이유는 영업 이익의 코드를 작동하는 바이올린있다된다 count은 에 대한 전역 변수이며 onymous 콜백 함수 in $.getJSON

2) $ .getJSON은 비동기입니다. 따라서 익명 콜백 함수는 get 요청이 성공한 후에 만 ​​트리거됩니다.

3) 익명 콜백이 실행될 때 count의 값은 for 루프에서 수정됩니다. 많은 경우에, 내 바이올린은 내가 지역 변수 arr에 count에서 streamArr의 가치를 통과 한)

1를 작동하고 왜 콜백이

을 트리거되기 전에 때문에 루프 (10)가 실행을 완료됩니다.

2) arr은 getJSON 함수의 지역 변수이므로 for 루프의 값은 수정되지 않습니다. 그래서 익명의 콜백 함수는 예상대로 작동합니다.