I have made an array of the statuses of different channels based on the data i got back from the api. All upto this is perfect, but I don’t know why I am not able to copy the channelStatus data so that I could display the status in my page and hence I am getting ‘undefined’ before each channel. I guess there’s a bit scoping issue maybe. Thanks in advance!
https://codepen.io/amritjha/pen/wJWYXM/
1 Like
Ajax calls are asynchronous. channelStatus
is empty when you try to output it.
Do it like this:
function onLoading() {
channels = ['ESL_SC2', 'OgamingSC2', 'cretetion', 'freecodecamp', 'habathcx', 'RobotCaleb', 'noobs2ninjas'];
channelStatus = [];
channels.forEach(function(channelname) {
apiURL = 'https://wind-bow.glitch.me/twitch-api/channels/' + channelname;
$.getJSON(apiURL).done(function(data) {
channelStatus.push(data.status);
updateChannel();
});
});
}
function updateChannel() {
channel_text = document.querySelectorAll('.channel-status h3');
for (i = 0; i < channel_text.length; i++) {
channel_text[i].innerHTML = channelStatus[i];
}
}
$(document).ready(onLoading);
2 Likes