Twitch project help - manipulating HTML elements based on API response

Twitch project help - manipulating HTML elements based on API response
0

#1

Right now, I have a toggle button that’s gray for each twitch user, What I would like to do is remove the toggle, if that user is playing a game.

So something like this: If data.stream.game == true, remove gray toggle button;

I don’t know where to do this in my code or how.

Codpen: https://codepen.io/rgsoto/pen/aVRJYp?editors=1111


#2

You are not going to have a situation where data.stream.game == true. If data.stream is not null, then there is a game playing. That is all you need to know to change the toggle. Also, you should not use 3 separate stand alone AJAX calls. Create a function with the AJAX call in it and pass in a username. as a parameter.

To have the switch toggle to the right when there is a stream, you can use:

$("#esl_sc2_toggle").prop('checked', true);

The above assumes you have an id=“esl_sc2_toggle” on the input. I recommend redoing your html so that the main div container for a user has an id of the username and then the children elements (divs and inputs) would contain the other data. That way, you can target the div with the id and target the children without having to create specific ids for each child to be targeted.


#3

Checking your console, you have a problem with the way you are using the data value on line 18:

console.log(data.links[0]);

Take a look at your data object:

You have a typo with links, and is links an array? Here is what it should be:

 console.log(data._links.self);

#4

Awesome, thank you! I knew creating three separate ajax calls violated the DRY principle bout couldn’t think of another way to do it. Your suggestion is great and much appreciated.


#5

Thanks Isaac! I’ll update my code.