jQuery text() inside .getJSON()

Question

I'm trying to get names from a Pokemon API and putting it into a div field in html, but the .text() function from jQuery doesn't seem to place the text into the html when I put it inside a .getJSON function. Just curious what could this problem be? Thanks.

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

Try answer on this post http://stackoverflow.com/questions/15347750/getjson-and-for-loop-issue — Nitin Varpe, Aug 24 '16 at 06:24

Pranav C Balan · Answer 1 · 2016-08-24T06:31:41.367

Since the getJSON is asynchronous at the time of success function is executes value of j would be 5. There is no element with id name5 so nothing would happen. To make it work use closure function.

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

Or using let for block level scope 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>

Thank you very much for your help! – jay zhou Aug 25 '16 at 07:14 — jay zhou, Aug 25 '16 at 07:14
@jayzhou : glad to help – Pranav C Balan Aug 25 '16 at 07:17 — Pranav C Balan, Aug 25 '16 at 07:17

score 1 · Answer 2 · answered Aug 24 '16 at 06:25

Create a closure inside the loop. Since getJSON is an asynchronous ,operation, loop will finish it's execution without waiting for getJSON to finish it's each execution.

You need to bind the value of j with the closure

$(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))
  }
});

Great thanks a lot for your help! It looks like I got a lot to learn about Javascript. — jay zhou, Aug 25 '16 at 07:14

jQuery text() inside .getJSON()

2 Answers2