Hello,
I am working on the Twitch API challenge, and something strange is happening. I can get the list of followers (“following” array) on the first console. log. However, after I close the getJSON bracket, I try to log the same variable, and it appears empty. The “following” array is supposed to be global. Am I doing anything wrong? Please see the code below. Thank you.
//Initialize when page has loaded
$(document).ready(function(){
// Get JSON API information
var following=[];
var url="https://wind-bow.glitch.me/twitch-api/streams/freecodecamp";
$.getJSON(url,function(data){
// Check if the channel is streaming
if(data.stream===null) {
$("#fccStatus").html("Channel is Offline");
}
else{
$("#fccStatus").html("Channel is Streaming");
}
}); // close getJSON url
var followerURL="https://wind-bow.glitch.me/twitch-api/users/freecodecamp/follows/channels";
$.getJSON(followerURL,function(followers){
for (var i=0;i<followers.follows.length;i++){
var displayName=followers.follows[i].channel.display_name;
following.push(displayName);
}
following.push("ikasperr");
console.log(following);
});
console.log(following);
for (var i=0;i<following.length;i++){
console.log(i);
var url2="https://wind-bow.glitch.me/twitch-api/streams/"+following[i];
console.log(url2);
$.getJSON(url2).done(function(data1){
var logo;
var status;
var name;
if(data1.stream==null) {
logo="https://thumb9.shutterstock.com/display_pic_with_logo/1491677/238655098/stock-photo-no-entry-sign-board-on-white-background-238655098.jpg";
status=data1.stream;
name=data1.message;
/*
$("#followerInfo").append("<div class='row'>"+"<div class='md-col-4'>"+"<img src='"+logo+"'>"+"</div>"+"<div class='md-col-4'>"+name+"</div>"+"<div class='md-col-4'>"+status+"</div>"+"</div>");
*/
} // close data1.stream===null
}); // close getJSON(url2)
} // close for loop
}); // close document ready