Twitch offline and online problem

#1

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

#2

Hi @lalov1

I found a few problems that was causing the filter to not behave as expected.

  1. The event listener for all filter is selecting onlineTab rather than allTab so onlineTab has 2 event listeners at the moment.

  2. 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.

  3. 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 the Offline streams instead. The offline filter does this as well.

  4. 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
1 Like
#3

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.

#4

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

1 Like
#5

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?

#6

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
1 Like
#7

Rookie Mistake! :sweat_smile:

Thank you for all your help!

1 Like
#8