# Coded myself into a hole (Twitch Api Challenge) \*\*Slightly lengthy read

**URL:** <https://forum.freecodecamp.org/t/coded-myself-into-a-hole-twitch-api-challenge-slightly-lengthy-read/142665>\
**Category:** General\
**Created:** [August 19, 2017, 2:58pm UTC](https://forum.freecodecamp.org/t/coded-myself-into-a-hole-twitch-api-challenge-slightly-lengthy-read/142665 "2017-08-19T14:58:12Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![ayembocx](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ayembocx/32/84954_2.png) [@ayembocx](https://forum.freecodecamp.org/u/ayembocx)\
**Post date:** [August 19, 2017, 2:58pm UTC](https://forum.freecodecamp.org/t/coded-myself-into-a-hole-twitch-api-challenge-slightly-lengthy-read/142665/1 "2017-08-19T14:58:12Z")

</div>

Hello all this will be the third post I’ve made about this challenge (even though it’s probably the second easiest challenge in the intermediate track oh well). I’m almost finished but I’ve hit a brick wall when it comes to getting online, offline, and all buttons to work. It seems the way I’ve designed the project I can’t use any variables to have the script determine which streams are online and offline and when to hide the div that contains the specific information. Code below with further explanations.

[https://codepen.io/DebugAyem/pen/qXVvbW](https://codepen.io/DebugAyem/pen/qXVvbW)

```auto
$(document).ready(main);
function main() {
  
  var i;
  var currentStatus; //the status of the stream (name of stream)
  var check; //variable that checks if stream exists
  var users = ["freecodecamp","ESL_SC2", "OgamingSC2", "cretetion"]; //twitch user array
  
users.forEach(function(userNames, i) {
  var twitchURL = "https://wind-bow.glitch.me/twitch-api/streams/" + userNames;

  $.getJSON(twitchURL, function(data) {
    
    console.log(data);
    
    $("#ch" + i).html("<h4 class='left'>" + userNames + "</h4>"); //inserts usernames into #ch id's
    
    check=data.stream; 
    
    
    if(check===null|| check===undefined){
      currentStatus = 'Offline'; //if var check shows stream doesn't exist set currentStatus to string 'offline'
    } else {
    currentStatus=check.channel.status;
    }
    
    $('#info'+ i).append('<p id="info"'+i+'>'+currentStatus+'</p>');
    $('#link'+ i).attr('href','https://www.twitch.tv/'+userNames);
  }); 
  
});
  
  $('#on').on('click',function (){
    //incomplete
    });
  
  $('#off').on('click',function (){
      //incomplete
  });
  
  $('#all').on('click',function (){
    $('.user'+i).show();
  });
  
  }

```

In looking at my code I believe my problems are this:

Due to my use of a .forEach loop at the beginning of my code I can’t (or don’t know how to) loop through the divs (in this case called user) to see which one to hide.

This is further compounded by the problem that the stream information is coming from an API (i.e “offline”) and I insert it into the html using Jquery so I’m not sure if I can even check for if the stream is active or not since the string ‘Offline’ isn’t technically part of my html.

One way I thought of fixing this was to try and hide all the offline streams from the get-go but that isn’t what the instructions say and frankly I’m not sure if I could even do that.

Any ideas for how I can get my buttons to hide or show the divs that contain the information based o their properties??

---

<div class="post-metadata">

**Author:** ![PortableStick](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/portablestick/32/65591_2.png) [@PortableStick](https://forum.freecodecamp.org/u/PortableStick)\
**Post date:** [August 19, 2017, 3:33pm UTC](https://forum.freecodecamp.org/t/coded-myself-into-a-hole-twitch-api-challenge-slightly-lengthy-read/142665/2 "2017-08-19T15:33:13Z")

</div>

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See [this post](http://forum.freecodecamp.com/t/forum-code-formatting/25574) to find the backtick on your keyboard.

![markdown_Forums](https://sea3.discourse-cdn.com/freecodecamp/uploads/default/original/3X/4/b/4b9a26f0c243380dd84935f4e29b92e3ecee8d05.gif)

---

<div class="post-metadata">

**Author:** ![PortableStick](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/portablestick/32/65591_2.png) [@PortableStick](https://forum.freecodecamp.org/u/PortableStick)\
**Post date:** [August 19, 2017, 3:45pm UTC](https://forum.freecodecamp.org/t/coded-myself-into-a-hole-twitch-api-challenge-slightly-lengthy-read/142665/3 "2017-08-19T15:45:22Z")

</div>

> [@ayembocx](#):
>
> Due to my use of a .forEach loop at the beginning of my code I can’t (or don’t know how to) loop through the divs (in this case called user) to see which one to hide.

You can give each user a class the marks them on or offline as you first render each element. jQuery makes it easy to find and loop through the elements.

> **[jQuery show/hide](https://codepen.io/PortableStick/pen/LjQKvY)**
>
> ...

---

<div class="post-metadata">

**Author:** ![ayembocx](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ayembocx/32/84954_2.png) [@ayembocx](https://forum.freecodecamp.org/u/ayembocx)\
**Post date:** [August 19, 2017, 3:49pm UTC](https://forum.freecodecamp.org/t/coded-myself-into-a-hole-twitch-api-challenge-slightly-lengthy-read/142665/4 "2017-08-19T15:49:51Z")

</div>

Hmm ok but I don’t know which is going to be offline at any given moment since the info is being taken from the API so I can’t preprogram it. I have to get the info from the api and then post it to my html and then act based on that. Also what is the purpose of the (idx) in your pen? I keep seeing it when dealing with xmlrequests but I don’t know what it does. Thanks

---

<div class="post-metadata">

**Author:** ![PortableStick](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/portablestick/32/65591_2.png) [@PortableStick](https://forum.freecodecamp.org/u/PortableStick)\
**Post date:** [August 19, 2017, 4:05pm UTC](https://forum.freecodecamp.org/t/coded-myself-into-a-hole-twitch-api-challenge-slightly-lengthy-read/142665/5 "2017-08-19T16:05:51Z")

</div>

`idx` is just a parameter name, short for “index”. [jQuery’s `each`](https://api.jquery.com/each/) method passes the index of the item you’re looking at as the first parameter to the callback function.

> [@ayembocx](#):
>
> I don’t know which is going to be offline at any given moment

Just concern yourself with the data you get from your first AJAX call. When you get to building server-side applications, you can think about making an app that updates its data while the user’s on it. The code that I showed you isn’t affected by what’s on Twitch’s servers. It just manipulates the data stored in the client side of the app.

---

<div class="post-metadata">

**Author:** ![ayembocx](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ayembocx/32/84954_2.png) [@ayembocx](https://forum.freecodecamp.org/u/ayembocx)\
**Post date:** [August 19, 2017, 10:40pm UTC](https://forum.freecodecamp.org/t/coded-myself-into-a-hole-twitch-api-challenge-slightly-lengthy-read/142665/6 "2017-08-19T22:40:22Z")

</div>

I get what your code is doing but this marking of online v offline has to be done after the data from the API is printed on the html page and that’s my main dilemma. That and I’m not sure how to loop through the api information to know which classes to hide.

\*\*Another idea that came to me is when I set currenStatus = ‘Offline’ I could give the specific user div that contains the span that has the information a class of offline or something but I still don’t know if the click function that I create later on will recognize this class generated by the script.  
Man I hope ^ made some sense ☹

---

<div class="post-metadata">

**Author:** ![PortableStick](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/portablestick/32/65591_2.png) [@PortableStick](https://forum.freecodecamp.org/u/PortableStick)\
**Post date:** [August 19, 2017, 10:57pm UTC](https://forum.freecodecamp.org/t/coded-myself-into-a-hole-twitch-api-challenge-slightly-lengthy-read/142665/7 "2017-08-19T22:57:36Z")

</div>

> [@ayembocx](#):
>
> I get what your code is doing but this marking of online v offline has to be done after the data from the API is printed on the html page

What? No it doesn’t.

```javascript
if(check===null|| check===undefined){ 
      // add offline users here
} else {
      // add online users here
}

```

---

<div class="post-metadata">

**Author:** ![ayembocx](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ayembocx/32/84954_2.png) [@ayembocx](https://forum.freecodecamp.org/u/ayembocx)\
**Post date:** [August 19, 2017, 11:43pm UTC](https://forum.freecodecamp.org/t/coded-myself-into-a-hole-twitch-api-challenge-slightly-lengthy-read/142665/8 "2017-08-19T23:43:03Z")

</div>

Oh well yes you’re right I worded that terribly, I just meant the data had to be accessed in general first (i.e check variable). So then I tried this

```auto
if(check===null|| check===undefined){
      currentStatus = 'Offline';
       off = $('.user'+i);
    } else {
    currentStatus=check.channel.status;
       on = $('.user'+i);
    }

```

and

```auto
$('#on').on('click',function (){
   off.hide();
    });
  
  $('#off').on('click',function (){
    on.hide();
  });
  
  $('#all').on('click',function (){
    $('.user'+i).show();
  });

```

but this seems to hide the divs at random. \*Sigh

---

<div class="post-metadata">

**Author:** ![PortableStick](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/portablestick/32/65591_2.png) [@PortableStick](https://forum.freecodecamp.org/u/PortableStick)\
**Post date:** [August 20, 2017, 12:30am UTC](https://forum.freecodecamp.org/t/coded-myself-into-a-hole-twitch-api-challenge-slightly-lengthy-read/142665/9 "2017-08-20T00:30:14Z")

</div>

I see the problem. You’ve hard-coded the HTML where the users will go. Let’s change that to make things easier.

Instead of these

```auto
<div class='user0'>
     <span id='ch0'></span>
     <a href='' target='_blank' id='link0'>
       <span id='info0'></span>
     </a>
   </div>
...
<div class='user3'>
     <span id='ch3'></span>
     <a href='' target='_blank' id='link3'>
      <span id='info3'></span>
     </a>
   </div>

```

Just have this

```auto
<ul id="streamers">
</ul>

```

Now in your JavaScript, we’ll change the code so that _each user is added to the list_. This is a much more dynamic and scalable strategy.

```javascript
var $streamersList = $('#streamers'); //add this before you start looping through users

//...later

if(check===null|| check===undefined){ 
      // add offline users here
     $streamersList.append('<li class="offline">
       <h2>' + stream.channel.display_name + '</h2>
     </li>');
    // You can change this markup to display whatever data you want
} else {
      // add online users here
     // do the same thing here
}

```

This _can_ get cleaner and easier to work with if we throw a template library like [HandlebarsJS](https://handlebarsjs.com) in the mix, but see if you can get this working the “hard” way first. I have an AJAX example where I use `$.getJSON` to access Github’s users API that uses the same strategy. You can take a look at it if you’d like:

> **[GitHub AJAX Example w/jQuery - callbacks](https://codepen.io/PortableStick/pen/VzXLNq)**
>
> ...

---

<div class="post-metadata">

**Author:** ![ayembocx](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ayembocx/32/84954_2.png) [@ayembocx](https://forum.freecodecamp.org/u/ayembocx)\
**Post date:** [August 20, 2017, 2:24am UTC](https://forum.freecodecamp.org/t/coded-myself-into-a-hole-twitch-api-challenge-slightly-lengthy-read/142665/10 "2017-08-20T02:24:51Z")

</div>

!!! Got it. Really appreciate the help man. Lot of quotation marks especially here

```auto
if(check===null|| check===undefined){
      currentStatus = 'Offline';
       $streamersList.append('<div class="off"><h1 class="user">'+userNames+'</h1><li class="offline"><a href="https://www.twitch.tv/'+userNames+'"target="_blank"><p>' + currentStatus + '</p></a></li></div>');
      
    } else {
    currentStatus=check.channel.status;
       $streamersList.append('<div class="on"><h1 class="user">'+userNames+'</h1><li class="online"><a href="https://www.twitch.tv/'+userNames+'"target="_blank"><p>' + currentStatus + '</p></a></li></div>');
      }

```

But it’s done. Here’s the new working codepen thanks. This was an all-day affair 😄

> **[Twitch Pen Api (FCC Challenge)](https://codepen.io/DebugAyem/pen/ayYvNj)**
>
> ...

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 8:41pm UTC](https://forum.freecodecamp.org/t/coded-myself-into-a-hole-twitch-api-challenge-slightly-lengthy-read/142665/11 "2021-01-17T20:41:58Z")

</div>

Closed on January 17, 2021, 8:41pm UTC