Zugriff auf ein globales Array innerhalb der $ .getJSON-Funktion

Question

Ich mache einen "Viewer" für Twitch TV, der anzeigt, ob TV-Kanäle online, offline oder nicht vorhanden sind. Ich benutze die API für Twitch TV. Ich habe die Kanalnamen in einem Array gespeichert, aber wenn ich versuche, ein Array-Element an ein HTML-Element anzuhängen, wird 'undefined' angezeigt. Das Array ist eine globale Variable.

Mein Code ist 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> 

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

Kann mir jemand sagen, wo der Fehler liegt? Vielen Dank.

Answer 1

Sie haben einen Verschluss für die Variable count erstellt, da JavaScript Funktionsumfang hat, weshalb der Wert Ihrer Zählvariable immer 10. Mit ES6 ist, können Sie let statt var in der for-Schleife verwenden, so wird count sein Blockbereich.

Answer 2

Lasst uns versuchen, die $.getJSON Funktion up zuerst ein wenig Reinigung:

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

und dann den Erfolg Rückruf in einem Verschluss kapseln, die den Index an ihn gebunden hat:

$.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 Methode ist asynchron, also For Schleife möglicherweise abgeschlossen, bevor aktuelle Anfrage ein Ergebnis zurückgibt. So Wert der Variablen count wird 10.

Hier ist eine Geige, die 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>

Warum OPs Code nicht wie erwartet funktioniert

1) Variable funktioniert count ist eine globale Variable zum an Onymous Callback-Funktion in $.getJSON

2) $ .getJSON ist asynchron. So wird die anonyme Callback-Funktion erst nach dem Erfolg der get-Anfrage ausgelöst.

3) Wenn der anonyme Callback ausgeführt wird, wird der Wert count in der for-Schleife geändert. In vielen Fällen wird es 10. Da für Schleifenausführung abgeschlossen ist, bevor der Rückruf

ausgelöst Warum ist meine Geige

1) Arbeits ich den Wert von streamArr bei count auf eine lokale Variable arr bestanden haben.

2) Da arr eine lokale Variable für die Funktion getJSON ist, wird ihr Wert in der for-Schleife nicht geändert. Die anonyme Rückruffunktion funktioniert also wie erwartet.