Twitch TV API, filter the results by clicking the buttons [CLOSED]

Hey Campers,

I am currently working with Twitch TV API project. I have managed to display the data of each user, and
I am thinking of an efficient solution to the Twitch all, online, offline buttons and filter the results.
Does anyone have an idea what can I do?

Thanks, Simon

E.g. When I click the All button a random user repeats to the length of the streamers array.

Let’s examine you current logic to first figure out where/when you should have your eventListeners for your button clicks.

Your current code (with the eventListener for the All button commented out) will display all users (online and offline), so it is the equivalent of when you click the “All” button. For now, you should probably start here and then figure out how to just display the online or just display the offline.

One approach you could take to display users of a specific online or offline status would be identify a user by their status. Currently, the only way to do that is look at the p element which contains the status. But if you were to use querySelectorAll to find just the p elements which contain the status “online”, it would be tricky to display all the other information like the name and the logo, because those are contained in sibling elements (h2, img). Since the 3 types of information (name, logo, and status) are nested in anchor elements (a), then why not give some special identification (like a class) to each anchor element, so you can perform a querySelectorAll to get all the links (anchor elements) with this special identification.

How? You would need to modify your outputResults function to add a class=“on” or class=“off” based on the obj.status value. I will let you figure that part out on your on.

OK, once you have figured how to make each anchor element look like one of the following:

Online Status

<a class="on" href="" target="_blank">
  <img width="50" src="">
  <p>KINGS OF THE NORTH - Winner's &amp; Loser's Finals / FINALE</p>

Offline Status

<a class="off" href="" target="_blank">
  <img width="50" src="">

then you can add an event listener for each button. Where do you add these event listeners? How about after all of the data has been displayed on the page. You should review the querySelectorAll documentation to see how best to use it for your project. See if you can get a little more coded. If you get stuck, then reply back to this thread and someone will help you.

I’m sorry to bother you with two more questions, @RandellDawson

1- I have moved the allButton event listener in different parts of code but still I can’t get it to work. What I am doing wrong?

const allButton = document.querySelector("body");
  allButton.addEventListener("click", (e) => {
      if( === 'all') {

2- I have a clear idea now what I need to do to display the users of an online or offline status but how can I use the querySelectorAll to get the links in ‘string interpolation mode’?

Hi @simongjetaj,
If I remember right, had each user with information prepend to the proper button div.

You can see mine here. I hope it helps.

In the previous reply, I suggested adding a class to each anchor tag to indicate which ones were online and offline (class=“on” or class=“off”). I do not see where you implemented this suggestion inside the outputResults (where this would go). Once you have the applicable classes on each anchor tag, then you could use the following code to handle all the buttons at the top. You will want to place the following code at the bottom of all your current code.

document.querySelector(".container").addEventListener("click", (e) => {
  var whichButton =;
  var findClass;
  switch (whichButton) {
    case "Online":
      findClass = "on";
    case "Offline":
      findClass = "off";
    var allAnchors = document.querySelectorAll("#output a");
    allAnchors.forEach(function(anchor) {
      if (whichButton === "All") { = "block";
      else { = "none";
        if (anchor.classList.contains(findClass)) {
 = "block";

You also would need to change change your css a little:

#output, .container, h1{
  max-width: 80%;
  text-align: center;

and move the h1 element out side the div with class=“container”

<h1>Twitch TV</h1>
<main class="container">
    <input type="submit" value="All" class="all">
    <input type="submit" value="Online" class="online">
    <input type="submit" value="Offline" class="offline">

and move the div with id="ouput’ outside of the div with class=“container”. This allows the addEventListener to just look at the elements inside the div with class="container.

Thanks a lot @RandellDawson, I did learn some new things, but online and offline buttons don’t display anything when I press them while the ‘all’ button works well.

I have implemented your suggestion to the code as this:

( === false) ? document.querySelectorAll("#output a").classList.add("off") : document.querySelectorAll("#output a").classList.add("on");

What am I missing?

Hi @KoniKodes,

Thank you for your willingness to help me out, but I am using vanilla javascript in the project.


document.querySelectorAll returns collection(NodeList), not element.

@korzo I tried the forEach before but I might have made a mistake and it still doesn’t work.
The fact I am inside a forEach loop have got me confused.

document.querySelectorAll("#output a").forEach(a => {
   ( === true) ? a.classList.add("on") : a.classList.add("off");

Looks like it already works.
From snipped you posted is unclear, what obj is.

obj contains all the necessary properties of each user.

I appreciate the use of vanilla, but the concept is the same.

Try to separate out the two options of online and offline. You could also state their status.

For instance if they are online, add class on and text On Line Now and add that data to the output box. Then do the same for offline.

Perhaps create a holding space for each streamer.

<div id="streamerInfo">
<div class="online"></div>
<div class="offline"></div>
<div class="noaccount"></div>
</div><!-- close Streamer Info -->

Then you could prepend to that div.