Hi,
So I’m working on the Twitch Streaming site and I got into a hiccup, for some reason .stream === null isn’t working.
I’ve tried looking at console and for reasons unknown, it’ll only show the data from streams that are online and freecodecamp which is offline is not shown.
Here’s my JS code
var vidThumbs = document.getElementsByClassName('vidThumbs');
//JSON
var streamers = ["ESL_SC2", "OgamingSC2", "admiralbulldog", "ESL_SC2", "OgamingSC2", "admiralbulldog", "freecodecamp"];
/**
* Create thumbnails based on streamers
*/
for (var index = 0; index < streamers.length; index++) {
var createDiv = document.createElement("div");
createDiv.className = "vidThumbs";
var vidStreams = document.getElementById("vidStreams");
vidStreams.appendChild(createDiv);
jsonRequest(streamers[index], index);
}
function jsonRequest(streamer, thumbnailNo) {
var request = new XMLHttpRequest();
request.open('GET', `https://wind-bow.glitch.me/twitch-api/streams/${streamer}`, true);
request.onload = function () {
if (request.status >= 200 && request.status < 400) {
// Success!
// console.log("success");
var data = JSON.parse(request.responseText);
var dataImagePreview = data.stream.preview.large;
// console.log(data);
// console.log(dataImagePreview);
console.log(data.stream);
if (data.stream === null) { // THIS PART NOT WORKING
console.log("true");
vidThumbs[thumbnailNo].style.backgroundColor = `#000`;
}
vidThumbs[thumbnailNo].style.backgroundImage = `url(${dataImagePreview})`;
}
else {
// We reached our target server, but it returned an error
console.log("failed");
}
};
request.onerror = function () {
console.log("an error occured");
};
request.send();
}
/**
* Determine thumbnail sizes depending on thumbnail quantity
*/
var vidStreamsHeight = document.getElementById('vidStreams').offsetHeight;
var vidThumbsQty = vidThumbs.length;
for (var index = 0; index < vidThumbsQty; index++) {
if (vidThumbsQty >= 4) {
//2 rows video thumbnail
vidThumbs[index].style.height = `${vidStreamsHeight / 2 - 20}px`;
vidThumbs[index].style.width = `${(vidStreamsHeight / 2 - 20) * 1.5}px`;
} else {
//single row video thumbnail
vidThumbs[index].style.height = `${vidStreamsHeight - 20}px`;
vidThumbs[index].style.width = `${(vidStreamsHeight - 20) * 1.5}px`;
}
}