2回のAPIコールを正確に行う方法がわからない

Question

私はFCCコースの一環としてTwitch.tvアプリで作業しています。私はフィニッシュラインの近くにいますが、私は各ユーザーのロゴを取得するのに苦労しています。説明するために、データを取得できるAPIの2つの異なるリンクがあります。ストリーム&チャネル。

ストリームリンクを使用している場合、ユーザーがオンラインであれば（実際には何の役にも立たない）、ロゴを取得できます。チャネルとは関係なく、ロゴを取得できます。ストリーミングを取得するには、実際にストリームリンクを使用する必要があります。私が推測する結果は、両方を使用する必要があるということです。

ストリーミングを1回、ロゴを1回、さまざまな方法で試してみましたが、結果が異なるため実際には分かりません。私が試した最新の方法では、ロゴは表示されますが、正しいストリーム/ストリーマーデータは得られません。私は問題を推測している、私はお互いの中で呼び出しを入れ子にする方法ですが、私はそれを行う適切な方法を把握することはできません。

誰でも助けていただけると助かります。完全なコードを見ることができる私のCodePenがここにあります。

function apicall(streamer) { 
    $.getJSON('https://api.twitch.tv/kraken/streams/' + streamer, function(a) { 
    if (a.stream == null) { 
     stateclass = 'bg-danger'; 
     game = 'Offline'; 
     status = ''; 
     url = ''; 
    } else { 
     stateclass = 'bg-success'; 
     game = a.stream.game + ': '; 
     status = a.stream.channel.status; 
     url = '<a target="_blank" href="' + a.stream.channel.url + '">'; 
    } 
    who = streamer; 
    $.getJSON('https://api.twitch.tv/kraken/channels/' + streamer, function(b) { 
     logo = b.logo; 
     console.log(logo); 

     html += '<div class ="row ' + stateclass + '"><div class="col-xs-2"><img src="' + logo + '"></div><div class="col-xs-4">' + who + '</div>' + '<div class="col-xs-6">' + url + game + status + '</a></div></div>'; 
     $(".options").html(html); 
    }); 
    }); 
} 

Answer 1

jQuery.when()を参照してください。

function apicall(streamer) { 
    var streamsReq = $.getJSON('https://api.twitch.tv/kraken/streams/' + streamer); 
    var channelsReq = $.getJSON('https://api.twitch.tv/kraken/channels/' + streamer); 

    return $.when(streamsReq, channelsReq).done(function (streams, channels) { 
    var stateclass, link, html = ''; 

    if (streams.stream && streams.stream.cannel) { 
     stateclass = 'bg-success'; 
     link = '<a target="_blank" href="' + streams.stream.channel.url + '">' + 
     streams.stream.game + ': ' + streams.stream.channel.status + '</a>'; 
    } else { 
     stateclass = 'bg-danger'; 
     link = 'Offline'; 
    } 

    html += '<div class ="row ' + stateclass + '">'; 
    html += '<div class="col-xs-2"><img src="' + channels.logo + '"></div>'; 
    html += '<div class="col-xs-4">' + streamer + '</div>'; 
    html += '<div class="col-xs-6">' + link + '</div>'; 
    html += '</div>'; 
    $(".options").html(html); 
    }).fail(function() { 
    // add error handling 
    }); 
}