Twitch App not showing online users

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