ネストされた$ .getJSON（）は正しい答えを得ることができませんか？

Question

私はfreecode.campからJqueryを学んでいます。Twitchtv JSON API（https://www.freecodecamp.com/challenges/use-the-twitchtv-json-api）を使用するためのコードをいくつか書いています。

私はTwitch.tvで5チャンネルのロゴを取得したいが、コードを書くときには、同じロゴが4つあることがわかりました。

私はhttp://codepen.io/zhangolve/pen/JKOXwW?editors=1111にコードを持っています。ご希望の場合は、ぜひチェックしてください。

これは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

1つのチャネルが何のロゴを持っていません。..私はプレースホルダ画像を使用しました。

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>