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