getJSON Variable gibt undefined zurück

Question

Ich weiß nicht, warum 'streamName [i]' in meinem getJSON 'undefined' zurückgibt. Alles, was in ihm die richtigen Werte zurückgibt, sondern nur die stream eine Rückkehr der undefined

var streamName = ['LCK1', 'ryan_clark', 'syndicate', 'riotgames', 'esl_csgo', 'Nightblue3', 'summit1g', 'imaqtpie', 'sodapoppin', 'captainsparklez']; 
 
var nullLogo = "https://dummyimage.com/50x50/ecf0e7/5c5457.jpg&text=0x3F"; 
 
var name; 
 

 
for (var i = 0; i < streamName.length; i++) { 
 
    var url = 'https://api.twitch.tv/kraken/streams/' + streamName[i] + '?callback=?'; 
 

 
    $.getJSON(url, function(data) { 
 
     console.log(name); 
 

 
     if (data.stream == null) { 
 
      $('.streamersList').append('<div> <div class="logo"> <img src=' + nullLogo + '></div> <div class="nameStreamer">' + streamName[i] + '</div> <div class="state"> Offline </div></div>'); 
 
     } else { 
 
      $('.streamersList').append('<div> <div class="logo"> <img src=' + data.stream.channel.logo + '></div> <div class="nameStreamer">' + streamName[i] + '</div> <div class="state">' + data.stream.channel.game + ' </div></div>'); 
 
     } 
 

 
    }); 
 
}

Answer 1

Da $.getJSON ist eine asynchrone Funktion, von der Zeit der Rückruf läuft, i wird die Schleife abgeschlossen haben. Da die Schleife bricht, wenn i größer oder gleich der Länge streamName ist, versucht i versuchen, auf ein Element in streamName nach dem Ende des Arrays zuzugreifen, die undefined ist.

Der Grund i ist in diesem Fall 10 innerhalb jeder Instanz des Rückrufs ist wegen der Art und Weise, in der Scoping in JavaScript funktioniert. Soweit der Code bekannt ist, wird i am Anfang der Funktion zusammen mit streamName, nullLogo und name deklariert. Beim Durchlaufen der Schleife wird der Wert i geändert, und diese Änderung ist überall in der Funktion sichtbar, einschließlich in den Callbacks, die noch nicht ausgeführt wurden. Wenn sie ausgeführt werden, wird i 10 sein, da es das Ende der Schleife erreichte, und das ist der Wert, den die Rückrufe verwenden.

Eine Möglichkeit, um sicherzustellen, dass Sie den richtigen Wert für i innerhalb der $.getJSON-Funktion erhalten, besteht darin, i als Parameter an eine sofort aufgerufene Funktion zu übergeben. Dies bindet effektiv den aktuellen Wert von i an den Parameter index, so dass die Verwendung von index, um ein Element aus dem Array zu bekommen, den richtigen Wert basierend auf der Iteration der Schleife haben wird.

for (var i = 0; i < streamName.length; i++) { 
    // note how i can be used here because this is synchronous, aka happening right now 
    var url = 'https://api.twitch.tv/kraken/streams/' + streamName[i] + '?callback=?'; 

    (function(index) { 
     $.getJSON(url, function(data) { 
      // this is asynchronous (happens in the future), so i will have a different 
      // value by the time it is called, but index will have the correct value 
      console.log(name); 
      if (data.stream == null) { 
       $('.streamersList').append('<div> <div class="logo"> <img src=' 
        + nullLogo 
        + '></div> <div class="nameStreamer">' 
        + streamName[index] 
        + '</div> <div class="state"> Offline </div></div>'); 
      } else { 
       $('.streamersList').append('<div> <div class="logo"> <img src=' 
        + data.stream.channel.logo 
        + '></div> <div class="nameStreamer">' 
        + streamName[index] 
        + '</div> <div class="state">' 
        + data.stream.channel.game 
        + ' </div></div>'); 
      } 
     }); 
    })(i); 
} 

Answer 2

$.getJSON ist eine asynchrone Funktion. Wenn der Funktionsrückruf stattfindet, hat die Schleife dadurch bereits alle Iterationen von i durchlaufen. Also ich Wert in Ihrem Fall ist streamName.lenghth Welche macht streamName[i] undefined

Ich würde vermeiden, einen Index in einem Callback wie folgt verwenden. Was Sie verwenden müssen, ist eine sofort aufgerufene Funktion Express (IIFE) Checkout diese anderen Stack-Overflow-Post. How to access index variable in a jquery getJson call ($.getJson) during a loop?