Twitch App not showing online users

1

Hi

I’m trying to show the online or offline users in the twitch app. The stream API however, is displaying a status of null on all the channels, even though some of them are clearly online when you click on them. Is this due to something I’ve done in the code? I can’t work out if it’s me or the API just isn’t working correctly for whatever reason.

https://codepen.io/KUBIX90/pen/gozXVL

Thanks
Mark

2

You have the classic Twitch beginner’s problem. Right here:

for (var i = 0; i < user.length; i++){
  $.get(twitchChannel + user[i], function(data){
    $.get(twitchStream + user[i], function(val){
  1. If you put $.get() inside a for loop, you will have problems.
  2. If you put $.get() inside another $.get() you will have problems.
  3. You have $.get() nested inside another $.get() which is nested in a for loop.

Definitely a problem in your code not the API.

The problem here is hard to explain. It is the asynchronous nature of JavaScript and AJAX you are struggling with, which can be difficult to grasp, especially if you’re inexperienced. I got stuck on this challenge for the longest time too. To keep it simple, getting the data from Twitch for each streamer takes time, but your code runs instantly. You expect your code to work like this:

1. select streamer from array
2. get data from twitchChannel
3. get data from twitchStream
4. process data

It actually works something like this

1. select streamer from array
2. request data from twitchChannel
3. request data from twitchStream
4. try to process data, but its undefined
5. select next streamer from array
6. data from twitchStream finally arrives
7. data from twitchChannel finally arrives

Unfortunately, you are trying to process the data before it arrives, so your streamers are null.

You will need to learn how to deal with this using callbacks, promises, and async functions. Here is a youtube series that can help you get started, you will probably want to research promises and async functions more extensively on your own.

https://www.thenetninja.co.uk/courses/asynchronous-javascript-tutorial

3

@KUBIX90,
previewing your code in CodePen I am seeing several things:
The image for the twitch logo is not loading
In your html, you are trying to load a script named App.js, but you have not specified it in your Settings for your pen.
Regarding what you asked, I don’t see you making any API calls. I would suggest consulting the instructions for this project as by making an API call, you can get data regarding the status of the channel.

https://www.freecodecamp.org/challenges/use-the-twitchtv-json-api

I am not seeing a status of null on all channels, but only for some.

twitch
twitch1355×566 157 KB

4

Thanks for the response, I’ve been through that tutorial yesterday and it helped a bit with the concept, I’m still struggling with it in the context of this app though and how to apply it.

I’m don’t know how to use the data/val information without a loop going through the users, I’m even finding it hard to describe what I’m trying to do! Just struggling a bit as to where to turn.

5

I don’t really understand what you mean. The information from the API is called and then shown using the showChannels function? I’ve got rid of the logo so I’m not worried about that. The JavaScript works as well as it can in this state, so I’m not sure how its not loaded correctly?