Twitch App: Successful gets, but output troubles

I have a list of channels in an array and am using forEach to cycle through and display infro from TWO api calls to display the channel info and stream status.

All of the logos and channel names appear correctly.

The stream status seems to be going hangwire.

The console shows all of the JSON objects are present, but It seems like that data is popping in at strange times and causing errors in the output.

Any idea of how I can improve this?

$(document).ready(function(){
    
    var channels = ["dootbeep","bort_hammer","freecodecamp","ESL_SC2", "OgamingSC2", "cretetion","habathcx", "RobotCaleb", "noobs2ninjas"];
    
    
     
  var displayChannel = function(channel){  
    var channelInfo
    // get the JSON object for each channel 
    $.ajax({ 
    type:"GET",
    url: "https://api.twitch.tv/kraken/channels/" + channel,
    headers:{
        "Client-ID": "ljvzlno3ci0iq7l7dl0hxww9dx0j0b",
    },
    success: function(data){
        channelInfo = '<div="row"><div class="container-fluid channel"><div class="panel-body"><div class="channel-logo col-md-4"><a href ="' + data.url + '"><img src="' + data.logo + '"></a></div>' + '<div class="channel-id col-md-4"><a href="' + data.url + '">' + data.display_name + '</a></div><div class="stream-status col-md-4"></div></div></div></div>';
        console.log(data);
        console.log(data.display_name);
        $("div.main-container").append(channelInfo);
         
    } // end function after successful call
    }); // end ajax call
  
    // get the stream status for the current channel in loop  
    $.ajax({ 
    type:"GET",
    url: "https://api.twitch.tv/kraken/streams/" + channel,
    headers:{
        "Client-ID": "ljvzlno3ci0iq7l7dl0hxww9dx0j0b",
    },
    success: function(data){
        console.log(data);
        if (data.stream === null){
            $("div.stream-status").text("Offline"); 
        } else {
            $("div.stream-status").text("Now Streaming " + data.stream.game);
        }
    } // end function after successful call
    }); //end ajax call

  }; // end display challen function
    
    
  
    
    //for each channel in the above array, get it's object
    channels.forEach(displayChannel);  
    


});

The way you’re running your AJAX calls, there’s no guarantee that the second one will have a div with the class of stream-status when it’s done. It could be completed before the first call has finished appending its data, or the first may error out entirely while the second completes. What you need to do is either chain the requests so that the second never completes before the first, or somehow get all of the data from both requests at the same time. Either way, you’ll want to use promises, and jQuery provides this for you. I suggest this video:

Then you will (I hope) understand this:

Which talks about this:

http://api.jquery.com/jQuery.when/

If you get this, it will be one of those “achievement unlocked” moments that takes your programming to the next level.