As you might guess I"m going through Freecodecamp's projects, on the Twitch API project. You can see my full codepen here.
The code loops through two json calls to the twitch api, the first works fine and everything looks good, those with data.stream register as "online" and those without register as "offline" which is all I need from it. Then the second json hits and everything goes to hell. On my codepen I console log both stat and data before and after the json call and nothing lines up and the second set don't follow the "offline/online" rules, or something I'm not seeing is happening. Been fighting this one for far too long and would love a new pair of eyes and a more educated brain to take a look at it ;)
//channel names
var usrNames = ["ESL_SC2", "freecodecamp"]
var url = "";
var stat = "offline";
//for each name create channel block
function createPlayers() {
usrNames.forEach(function(usrName) {
function createURL(type, name){
url = 'https://wind-bow.gomix.me/twitch-api/' + type + '/' + name + '?callback=?';
return url;
}
$.getJSON(createURL("streams", usrName), function(data) {
if (data.stream == null){
stat = "offline";
} else {
stat = "online";
}
$.getJSON(createURL("channels", usrName), function(data) {
var logo = "";
if (data.logo == null){
logo = "https://via.placeholder.com/60x60";
} else {
logo = data.logo;
}
var newHtml = "<div class='channel_box'><div class='innerbox'><div class='clearfix'><div><img class='logo' src='"+ logo +"'></div><div class='chName'>" + usrName + "</div><div class='" + stat + "'>Online</div></div><div class='bannerBox'><img src='" + data.profile_banner + "'></div></div></div>"
$("#outline").append(newHtml);
});
});
});
}
createPlayers();
I was passing the information in both JSON queries as "data" switched the secondt o data1 and it's all working. I'm silly.