Can't figure out how to accurately make two API Calls

Question

I'm working on a Twitch.tv app as part of the FCC course. I'm near the finish line but I'm struggling to get the logo for each user. To explain, there's two different links for the API where I can get data: Streams & Channels.

If I use the streams link I can only get the logo if the user is online (which isn't really any good), where as with Channel I can get it regardless. To get what's streaming though, I really need to use the Stream link. The outcome then I guess, is I need to use both.

I've tried a variety of ways to make one call to streams and one to channels for the logo with a load of different results and I really can't figure it out. The latest way I've tried (below) gets me logos but not the correct stream/streamer data. I'm guessing the issue is how I'm nesting the calls within one another, but I can't figure out the proper way to do it.

Would appreciate any help anyone can give. Here's my CodePen where you can see the full code.

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

See 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
  });
}