Nested $.getJSON() can not get correct answer?

Question

I am just learning Jquery from freecode.camp and I am writing some code to Use the Twitchtv JSON API ( https://www.freecodecamp.com/challenges/use-the-twitchtv-json-api).

When I want to get five channels logo on Twitch.tv ,but when I write the code ,I just found there was four same logo ,it was never what I want .

I have a codepen at http://codepen.io/zhangolve/pen/JKOXwW?editors=1111 ,if you like ,please check it out.

this is the JS code:

$("#click").on("click", function() {
    var channel = ['OgamingSC2', 'FreeCodeCamp', 'terakilobyte', 'storbeck', 'RobotCaleb'];
    for (var i = 0; i < channel.length; i++)  {
        var url = 'https://api.twitch.tv/kraken/streams/' + channel[i] + '?callback=?';
        var thechannelurl = 'https://api.twitch.tv/kraken/channels/' + channel[i] + '?callback=?';
        $.getJSON(url, function(data) {
            if (data.stream == null) {
                $.ajax({
                    dataType: "json",
                    url: thechannelurl,
                    //data: data,
                    type: "GET",
                    success: function(w) {
                        $("#content").append('<img src=' + w.logo + '> </img>')
                    }
                });
            } else {
                var logo = data.stream.channel.logo;
                //console.log(logo);
                $("#content").append('<img src=' + logo + '></img>');
            }
        })
    }
})

The value `thechannelurl` is always the same because the callbacks of `$.getJSON` will be called after the loop finished. A fast fix would be to use a immediately-invoked-anonymous-function (check [this answer](http://stackoverflow.com/a/26679537/1960455) more details) — t.niese, Jul 12 '16 at 10:49

score 0 · Answer 1 · answered Jul 12 '16 at 11:25

I forked your pen ...

Here is the code working: http://codepen.io/rafaelcastrocouto/pen/rLYWXV

One channel in your list has no logo ... so I used a placeholder image.

var channelAPI = 'https://api.twitch.tv/kraken/';

var  channels=['OgamingSC2',
                'FreeCodeCamp',
                'terakilobyte',
                'storbeck',
                'RobotCaleb'];

var getJSONCallback = function (data, url) {
    if (data && data.logo) {console.log('1', data.logo)
      appendLogo(data.logo);
    } else if (data && 
              data.stream && 
              data.stream.channel && 
              data.stream.channel.logo) {console.log('3', data.stream.channel.logo)
      appendLogo(data.stream.channel.logo);
    } else if (url && url.channel) {console.log('2', url.channel.toString())
      $.getJSON(channelAPI+'channels/'+url.channel, getJSONCallback);
    } else {
      appendLogo('https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=No Logo Found&w=302&h=302');
    }
};

var appendLogo = function (logo) {
  $("#content").append('<img class="img" src="'+logo+'"></img>');
};

var clickFunction = function() {
  for(var i=0;i<channels.length;i++)  {
    var channel = channels[i];
    $.getJSON(channelAPI+'streams/'+channel, function (data) {
      getJSONCallback(data, {channel: this});
    }.bind(channel));
  }
};

$("#click").on("click", clickFunction);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="click" class="btn btn-primary" >click</button>
<div id="content"></div>

lot of thanks for your work. I have folked your pen and will have a good look. — zhang olve, Jul 12 '16 at 11:36

Nested $.getJSON() can not get correct answer?

1 Answers1