Hi there,
I have taken a simple approach to the Twitchtv JSON API project: https://codepen.io/bvcx/pen/wjVGRO
I have a function that loops through the stream array and push false
to another array if the stream (data.stream) is null, if it’s something other than null it pushes true
to the array.
In the next function I loop through the stream array and have an if statement that checks against the online/offline array, if true
it appends content reflecting the stream being live, if false
it appends content reflecting the stream being offline.
It does work, but not as intended. What streams is online/offline usually changes each time I run the script within a short timeframe (seconds), so something is wrong.
I’m aware that the project needs work, I just want to get basics working first.
var streamArray = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var onlineOrNotArr = [];
function offlineOrOnline() {
for (var i = 0; i < streamArray.length; i++) {
$.ajax({
url: 'https://wind-bow.glitch.me/twitch-api/streams/' + streamArray[i],
type: 'get',
data: {
},
dataType: 'json',
success: function (data) {
if (data.stream === null) {
onlineOrNotArr.push(false);
} else {
onlineOrNotArr.push(true);
}
}
});
}
}
function printStreams() {
var j = 0;
for (var i = 0; i < streamArray.length; i++) {
$.ajax({
url: 'https://wind-bow.glitch.me/twitch-api/channels/' + streamArray[i],
type: 'get',
data: {
},
dataType: 'json',
success: function (data) {
if (onlineOrNotArr[j++] === true) {
$(".streams").append('<div class="results online"><div class="nestedDiv"><img src="' + data.logo + '" height"100px" width="100px"></div>' + '<div class="nestedDiv"><b>' + data.display_name + '</b></div>' + '<div class="nestedDiv">' + data.game + ' : ' + data.status + '</div></div>');
} else {
$(".streams").append('<div class="results offline"><img src="' + data.logo + '" height"100px" width="100px">' + data.display_name + 'Offline' + '</div>');
}
}
});
}
}
offlineOrOnline();
printStreams();
function hideOnline() {
$('.online').css("visibility", "hidden");
$('.offline').css("visibility", "visible");
}
function showOnline() {
$('.online').css("visibility", "visible");
$('.offline').css("visibility", "hidden");
}
function showAll() {
$('.online').css("visibility", "visible");
$('.offline').css("visibility", "visible");
}