Json "for" loop

Question

I want to put information about video in #t1, #t2 and #t3, but everything is placed in #t3. Where is the mistake in the code?

  $(function(){
        for (var i = 1; i < 4; i++) {
            var box = "#t" + i;
            var id = "dQw4w9WgXcQ";
          
            var img = "<img src='https://img.youtube.com/vi/" + id + "/default.jpg'>";
            console.log(i);

            $.getJSON('https://www.googleapis.com/youtube/v3/videos?part=statistics&id=' + id +  '&key=AIzaSyBlYMwv6QQ9x3r1ACVt1ZeyiRXiaGeKOBU', function(data) {

                $(box).prepend("viewCount: " + data.items[ 0 ].statistics.viewCount);


            });
            $.getJSON('https://www.googleapis.com/youtube/v3/videos?part=snippet&id=' + id + '&key=AIzaSyBlYMwv6QQ9x3r1ACVt1ZeyiRXiaGeKOBU', function(data) {
                $(box).prepend("<h3>" + "Title" + data.items[0].snippet.title + "</h3>");
                $(box).prepend("<h3>" + "Channel title" + data.items[0].snippet.channelTitle + "</h3>");
                $(box).prepend(img);
            });
        }
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<div id="t1"></div>
<div id="t2"></div>
<div id="t3"></div>

Look up how closures work in JavaScript! Your calls to $.getJSON() work asynchronously, the value for box is #t3 by the time the callback is executed! — Mithrandir
– Mithrandir, Commented Apr 15, 2016 at 12:12

Thalaivar · Accepted Answer · 2016-04-15 12:13:18Z

Closures... wrap everything in a closure which would create a new scope for each iteration.

$(function(){      
        for (var i = 1; i < 4; i++) {
          (function(i)
            var box = "#t" + i;
            var id = "dQw4w9WgXcQ";

            var img = "<img src='https://img.youtube.com/vi/" + id + "/default.jpg'>";
            console.log(i);

            $.getJSON('https://www.googleapis.com/youtube/v3/videos?part=statistics&id=' + id +  '&key=AIzaSyBlYMwv6QQ9x3r1ACVt1ZeyiRXiaGeKOBU', function(data) {

                $(box).prepend("viewCount: " + data.items[ 0 ].statistics.viewCount);


            });
            $.getJSON('https://www.googleapis.com/youtube/v3/videos?part=snippet&id=' + id + '&key=AIzaSyBlYMwv6QQ9x3r1ACVt1ZeyiRXiaGeKOBU', function(data) {
                $(box).prepend("<h3>" + "Title" + data.items[0].snippet.title + "</h3>");
                $(box).prepend("<h3>" + "Channel title" + data.items[0].snippet.channelTitle + "</h3>");
                $(box).prepend(img);
            });
        }
       })(i);
    });

Rayon · Accepted Answer · 2016-04-15 12:19:06Z

1

$.getJSON is asynchronous, handler will be invoked when response is received. But for-loop will not wait for handler to be called!

Create a inner-function and pass value of i as argument as value of i will be persistent for the inner-function.

$(function() {
  for (var i = 1; i < 4; i++) {
    var tobeCalled = function(i) {
      var box = "#t" + i;
      var id = "dQw4w9WgXcQ";
      var img = "<img src='https://img.youtube.com/vi/" + id + "/default.jpg'>";
      $.getJSON('https://www.googleapis.com/youtube/v3/videos?part=statistics&id=' + id + '&key=AIzaSyBlYMwv6QQ9x3r1ACVt1ZeyiRXiaGeKOBU', function(data) {
        $(box).prepend("viewCount: " + data.items[0].statistics.viewCount);
      });
      $.getJSON('https://www.googleapis.com/youtube/v3/videos?part=snippet&id=' + id + '&key=AIzaSyBlYMwv6QQ9x3r1ACVt1ZeyiRXiaGeKOBU', function(data) {
        $(box).prepend("<h3>" + "Title" + data.items[0].snippet.title + "</h3>");
        $(box).prepend("<h3>" + "Channel title" + data.items[0].snippet.channelTitle + "</h3>");
        $(box).prepend(img);
      });
    }
    tobeCalled(i);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<div id="t1">
  <h2>1</h2>
</div>
<div id="t2">
  <h2>2</h2>
</div>
<div id="t3">
  <h2>3</h2>
</div>

edited Apr 15, 2016 at 12:19

answered Apr 15, 2016 at 12:17

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

1 Comment

Rayon Over a year ago

I'm glad it helped! Happy Coding

Collectives™ on Stack Overflow

Json "for" loop

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related