Could someone tell me why I can’t get the Twitch online and offline to filter. Also, how am I supposed to see if the user is online? https://codepen.io/lalov1/pen/bZjGvA
Hi @lalov1
I found a few problems that was causing the filter to not behave as expected.
-
The event listener for all filter is selecting
onlineTab
rather thanallTab
so onlineTab has 2 event listeners at the moment. -
The loops inside the filter functions are configured for
<= e.length
. Remember, the arrays length is 1 more than the last index in the array, so you need to have it as< e.length
so that it doesn’t check an item that doesn’t exist and throw an error. -
The filter functions are hiding the wrong set of elements; currently, if you click online it will search for all items with a class of
Online
and then hide them. What you want it to do is hide all of theOffline
streams instead. The offline filter does this as well. -
Because all the filter functions do is hide the elements, you probably want to add a second loop for the respective elements to show. If you’re stuck, see the example below.
function filterOnline() {
var offlineHide = document.getElementsByClassName("Offline");
for(var i = 0; i < offlineHide.length; i++) {
offlineHide[i].style.display = "none";
}
var onlineShow = document.getElementsByClassName("Online");
for(var i = 0; i < onlineShow.length; i++) {
onlineShow[i].style.display = "block";
}
}
As for seeing if a streamer is online or not, unless it’s changed since I did it, I had to make a second API call to: https://api.twitch.tv/kraken/streams/streamerNameHere. This returns an object that contains a stream
object; if that object also contains a stream
object than the user is online, if there is no stream
object then they are offline.
apiObject.stream.stream // Object === online
apiObject.stream.stream // null === offline
Thanks for all your help! I got everything working, but the online and offline information. Do you think you could look at that? I’m trying to do a function and return the string, but it seems to not be working. I think this might be because it is in another function. I’m trying to use all vanilla javascript for this project and having a lot of trouble since I used to use JQuery.
You’re sort of right, it’s because that function makes an asynchronous call, so the data won’t actually be available when you’re making the html from the first call.
You need to nest the second xhr request inside the first and move the DOM updates into the second onload function, that way you’ll have access to both the stream and the channel information.
I know you wanted to use vanilla JS but using xhr is such a pain that you might be better of with native fetch and promises. Here’s how you could re-write both xrh requests with fetch:
mmaTwichers.forEach(function(item, index) {
fetch('https://wind-bow.gomix.me/twitch-api/channels/' + item)
.then(res => res.json())
.then(channel => {
fetch('https://wind-bow.gomix.me/twitch-api/streams/' + channel.display_name)
.then(res => res.json())
.then(stream => {
var status = stream.stream ? 'Online' : 'Offline';
twitchInfo.insertAdjacentHTML(
"afterend", "<div class='row twitchUsers" + index + " " + status + "'>" +
"<div class='col-md-6 col-sm-offset-3'><div class='col-md-2'>" +
"<img class='thumbnail' src='" + channel.logo + "'/></div><div class='col-md-2'>" +
"<a href='"+ channel.url +"' target='_blank''>" + channel.display_name +
"</a></div><div class='col-md-8 text-center'>" + status +
"</div></div></div>"
)
})
})
});
This would replace both xhr requests
Thank you for your help and patience, but for some reason I’m trying your code and can’t get it to work. Do I need to bring in a library?
Fetch is a new browser feature, but it is supported by all modern browsers, so assuming yours is update it should work.
I just checked your codepen, and somehow an extra space has been inserted in both urls where it shouldn’t be
'https://wind-bow.gomix.me/twitch-api/channels/ ' + item
^ remove this space
'https://wind-bow.gomix.me/twitch-api/streams/ ' + channel.display_name
^ remove this space
Rookie Mistake!
Thank you for all your help!