嵌套 $.getJSON() 无法得到正确答案？ [复制]

Question

我刚刚从 freecode.camp 学习 Jquery，并且正在编写一些代码来使用 Twitchtv JSON API (https://www.freecodecamp.com/challenges/use-the-twitchtv-json-api)。

当我想在 Twitch.tv 上获得五个频道的标志时，但当我编写代码时，我发现有四个相同的标志，这不是我想要的。

我在http://codepen.io/zhangolve/pen/JKOXwW?editors=1111 有一个codepen，如果你喜欢，请查看。

这是JS代码：

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

Answer 1

我叉了你的笔……

下面是工作代码： http://codepen.io/rafaelcastrocouto/pen/rLYWXV

您列表中的一个频道没有徽标...所以我使用了占位符图片。

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>