jQuery text() innerhalb .getJSON()

Question

Ich versuche, Namen von einer Pokemon API zu bekommen und es in ein Div-Feld in HTML, aber die. Text() -Funktion von jQuery scheint nicht den Text zu platzieren in den HTML-Code, wenn ich es in eine .getJSON-Funktion einfüge. Nur neugierig, was könnte dieses Problem sein? Vielen Dank.

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-3" id="1"> 
      <div id="name1"></div> 
     </div> 
     <div class="col-sm-3" id="2"> 
      <div id="name2"></div> 
     </div> 
     <div class="col-sm-3" id="3"> 
      <div id="name3"></div> 
     </div> 
     <div class="col-sm-3" id="4"> 
      <div id="name4"></div> 
     </div> 
    </div> 
    </div> 

Javascript-Code

$(document).ready(function() { 
/*Works*/ 
for(var j = 1; j < 5; j++){ 
    $("#name" + j).text("HELLO"); 
} 
/*Doesn't work*/ 
for(var j = 1; j < 5; j++){ 
    var webAddress2 = "http://pokeapi.co/api/v1/pokemon/" + j; 
    $.getJSON(webAddress2, function(data) { 
     console.log("test"); 
     $("#name" + j).text("SOME TEXT"); 
    }); 
} 
}); 

Answer 1

Da die getJSON zum Zeitpunkt der Erfolgsfunktion asynchron ist ausführt Wert von j5 wäre. Es gibt kein Element mit der ID name5, so dass nichts passieren würde. Um es funktionieren zu lassen, verwenden Sie closure Funktion.

$(document).ready(function() { 
 
    /*Works*/ 
 
    for (var j = 1; j < 5; j++) { 
 
    $("#name" + j).text("HELLO"); 
 
    } 
 
    /*Doesn't work*/ 
 
    for (var j = 1; j < 5; j++) { 
 
    var webAddress2 = "http://pokeapi.co/api/v1/pokemon/" + j; 
 
    (function(j) { 
 
     $.getJSON(webAddress2, function(data) { 
 
     console.log("test"); 
 
     $("#name" + j).text("SOME TEXT"); 
 
     }); 
 
    })(j); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-3" id="1"> 
 
     <div id="name1"></div> 
 
    </div> 
 
    <div class="col-sm-3" id="2"> 
 
     <div id="name2"></div> 
 
    </div> 
 
    <div class="col-sm-3" id="3"> 
 
     <div id="name3"></div> 
 
    </div> 
 
    <div class="col-sm-3" id="4"> 
 
     <div id="name4"></div> 
 
    </div> 
 
    </div> 
 
</div>

---

Oder let für Blockebene Umfang Variable.

$(document).ready(function() { 
 
    /*Works*/ 
 
    for (var j = 1; j < 5; j++) { 
 
    $("#name" + j).text("HELLO"); 
 
    } 
 
    /*Doesn't work*/ 
 
    for (let j = 1; j < 5; j++) { 
 
    var webAddress2 = "http://pokeapi.co/api/v1/pokemon/" + j; 
 
    $.getJSON(webAddress2, function(data) { 
 
     console.log("test"); 
 
     $("#name" + j).text("SOME TEXT"); 
 
    }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-3" id="1"> 
 
     <div id="name1"></div> 
 
    </div> 
 
    <div class="col-sm-3" id="2"> 
 
     <div id="name2"></div> 
 
    </div> 
 
    <div class="col-sm-3" id="3"> 
 
     <div id="name3"></div> 
 
    </div> 
 
    <div class="col-sm-3" id="4"> 
 
     <div id="name4"></div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Erstellen eines Verschlusses innerhalb der Schleife. Da getJSON eine asynchrone Operation ist, beendet die Schleife ihre Ausführung, ohne auf getJSON zu warten, um ihre Ausführung zu beenden.

Sie müssen den Wert von j mit der Schließung

$(document).ready(function() { 
    for (var j = 1; j < 5; j++) { 
    (function(index) { 
     var webAddress2 = "http://pokeapi.co/api/v1/pokemon/" + index; 
     $.getJSON(webAddress2, function(data) { 
     console.log("test"); 
     $("#name" + index).text("SOME TEXT"); 
     }); 
    }(j)) 
    } 
});