Twitch.tv problem

Twitch.tv problem
0

#1

Yes, I know, it’s really ugly looking, but I’ll make it little prettier once I get the basic functionality:

So, I want to use listUsers variable for making the links for offline users, but I’m always getting only noobs2ninjas user - it’s the last user in my array… Why is that and to fix this mess?


#2

Your computer can process data much faster locally than it can get data from another server. By the time you get data from the Twitch servers, your for loop has already completed and listUsers has been reassigned. What you want to do is cache your current user inside of your AJAX callback

$.getJSON(getUsers, function(data) {
   var currentUser = listUser;
   //...

Then use curentUser for your URLs instead of listUser.

edit: of course not, the callback doesn’t run until the loop is finished…


#3

Thanks for response. Unfortunately, still not workin, as you can see…


#4

Hi, two problems:

1.- for loop closure :
``https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch5.md#loops–closure

2.- listUsers is a global variable:
[line 4] listUsers = users[i];


#5

From what I can see you’ll be unable to easily determine which user you recieved the callback from (i.e. just calling the old variable won’t work). Maybe you should consider looking more at what the API returns for kind of values?

It looks like twitch API always returns data['_link'], which seems to be what you sent. I would try to figure out which users data was returned to the callback by looking at that variable instead.

Another good tips is to put in a console.log(data) at the start of the function, and open up your console and see how the returned data is structured and how you’re supposed to call it.

Hopefully this get’s you back on track! :slight_smile:


#6
var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
$(document).ready(function(){
  for (var i=0;i< users.length;i++){
   getUsers = "https://api.twitch.tv/kraken/streams/" + users[i] + "/?callback=?"; 
    console.log(users[i]);
    // for each user getJSON  
    $.getJSON(getUsers, function(data) {
      if (data.stream===null){     /*****YOU NEED TO ADD ANOTHER GETJSON HERE **** */
        $.getJSON(data._links.channel, function(data2) {
           $("#channels").append("<h3><a href = 'https://www.twitch.tv/" + data2.name + "'>" + data2.name + "</a> Offline</h3>");
        }); // end getJSON when stream === null 
       
      } // end if
  
    $("#channels").prepend("<h3><a href = https://www.twitch.tv/" + data.stream.channel.name + ">" + data.stream.channel.display_name + "</a>" + " " + data.stream.channel.status + "</h3>");
  

   
}); // end getjson
      }// end for loop
}); // end doc

You need to add another $.getJSON within the if condition to extract the data from API.
Also, var currentUser = listUsers; within getJSON caused the repetition of noobs2ninjas 8 times from the for loop. Resulting in #channel statement to produce noobs2ninjas 8 times.


#7

That did it, thanks! My main problem was that I thought that there was no way to get channels name if it’s offline - I even read that twitch employee confirmed that in Twitch forum, or I misunderstood him… I never tried to open channel link for offline users and see what’s inside, my bad… That’s why I wanted to get users from array instead from server. Do you know by any chance what was the way to get offline users from an array?

Also, var currentUser = listUsers; within getJSON caused the repetition of noobs2ninjas 8 times from the for loop. Resulting in #channel statement to produce noobs2ninjas 8 times.

This was advice from the first guy that wanted to help, I left it for him to see that it’s not the solution.


#8
if (data.stream===null){
  $.getJSON(data._links.channel, function(data2){
    var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
    for (i=0;i<8;i++){
  $("#channels").append("<h3><a href = https://www.twitch.tv/" + users[i] + ">" + users[i] + "</a> Offline</h3>");
    } // end for
   }); // end getJSON
  } // end if

The only way I know is to add the Users array inside getJSON to get the offline users from the array and use a for loop for each user name to be added to #channel hahaha hope i interpreted your question correctly


#9

Hi, my solution :
``http://codepen.io/erretres/pen/AXxGXv?editors=0010

1.- for loop closure problem:

  • replace for loop with “forEach” :
    [line 4] users.forEach(function (el) {

2.- listUsers global variable problem:
[line 5] var listUsers = el;