Well, I’m beyond puzzled.
How does this even happen?!
Here’s my code:
var streamersArray = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
for(let i=0;i<streamersArray.length; i++) {
fetch('https://wind-bow.glitch.me/twitch-api/users/' + streamersArray[i])
.then(response => {
if(response.ok) return response.json();
throw new Error(response.statusText);
})
.then(function handleData(data) {
var displayName = data.display_name
$("#listofstreamers").append("<div class='streamer"+i+" streamer' > "+displayName+" </div>");
})
.catch(function handleError(error) {
});
fetch('https://wind-bow.glitch.me/twitch-api/streams/' + streamersArray[i])
.then(response => {
if(response.ok) return response.json();
throw new Error(response.statusText);
})
.then(function handleData(data) {
var onlineStatus = data.stream;
var streamStatus = data.channel.status;
console.log(data.stream);
if(onlineStatus == null) {
$(".streamer"+i).append("<p>Offline</p>");
}
else {
$(".streamer"+i).append("<p>"+streamStatus+"</p>");
}
})
.catch(function handleError(error) {
})
};
My problems are on my second Fetch, inside .then(function handleData(data) { })
This is the weirdest thing. If I place that console.log ABOVE both variables, it works just fine. If i place BELOW them, it suddenly doesn’t work. How does that even happen?
UPDATE: Okay, I managed to get rid of that problem by not declaring any variables. I Still do not understand why it happened. Could someone please explain?
Now, I’ve got a new problem. The whole thing is just inconsistent. Sometimes it shows the offline status and the current channel status if online, and sometimes it doesn’t.
How do I go about this? I’d like to know why this doesn’t work, and perhaps get some hints and tips as to how to structure my code to make it all work.