Help with Twitch.tv project

1

Currently working on the Twitch.tv project and having a bit of problem with displaying the code.
Here is my code:

$(document).ready(function() {
  
  var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
  
  for (i=0; i<users.length; i++) {
    var url="https://api.twitch.tv/kraken/channels/" + users[i];
    var logo;
    var channel;
    var status;
    $.ajax ({
      type: 'GET',
        url: url,
      headers: {
        'Client-ID': 'hw8qejm816w6tjk88fdhfjz1wxpypm'
      },
      success: function(data) {
        logo = data.logo;
        channel = data.name;
      }      
      
    });
    var url2 = "https://api.twitch.tv/kraken/streams/" + users[i];
    $.ajax ({
      type: 'GET',
      url: url2,
      headers: {
        'Client-ID': 'hw8qejm816w6tjk88fdhfjz1wxpypm'
      },
      success: function(data2) {
        if (data2.stream == null) {
          status = "Offline";
        } else {
          status = "Online";
        };
        
      }
      
    });
    $("#channelInfo").prepend("<div class='row'><div class='col-xs-4'><img src="+logo+"></div><div class='col-xs-4'>"+channel+"</div><div class='col-xs-4'>"+status+"</div></div>")

  };
});

I am sure the API is working well. I make 2 API calls here, one to “https://api.twitch.tv/kraken/channels/” and another to “https://api.twitch.tv/kraken/streams/”, because I would like to display the channel logo even when a channel is offline, and the /streams/ calls doesn’t display this information in the json when the stream is offline (or ‘null’).

Rest of my code can be found here: http://codepen.io/drhectapus/pen/VPNQJa

2

Ajax requests are asynchronous so the $("#channelInfo").prepend() runs before any data is returned.

1 Like
3

How can I change the code so it works then?

4

You can put the two ajax requests in functions and use $.when to check when they return data.

I forked your pen and implemented this: http://codepen.io/benjaminvanzwienen/pen/yMLpZG

1 Like
5

you need to “wait out” for the ajax call to return anything, error or sucess. cause the way you have it set up the ajax calls will go up but the code will continue to process and it won’t wait for anything more. here this might shed some light on the issue and how to tackle it

7

Thanks for getting it to work. I kind of understand what you’ve done here, but having trouble trying to understand it in detail, especially the ‘then’ part.

$.when(request1(url), request2(url2)).then(function(data, data2)

I understand that when it executes both request1 and request2 functions, then it will execute function(data, data2).

But,

  1. How does it know that data is to be used by request1 and data2 is to be used by request2?
  2. Why does the data require index 0 now? E.g. data[0].logo as opposed to data.logo?

Also, I’d like to add an error function to my AJAX calls for users which don’t exist, such as ‘brunofin’ and ‘comster404’. How can I factor this code in?

8
  1. It just gets them in order. $.when(func1(),func2()).then(function(data_func1,data_func2){}) the first parameter in when corresponds with the first parameter in then.
  2. I just console.log data and data2. So I only know you can access it this way, but I don’t know why it is different.
9

Thanks it makes sense what you’re saying. I have another problem now though - I want to add in a way so that it executes something if there’s an error with the AJAX call. For example, when I check to see if stream ‘brunofin’ exists (which it doesn’t). How can I factor this into the code? Is there a way to make it execute function if there’s ‘error’ in AJAX call?

10

You can use the following syntax (http://api.jquery.com/jQuery.when/):

$.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) )
  .then( myFunc, myFailure );

I changed my fork: http://codepen.io/benjaminvanzwienen/pen/yMLpZG, it console.log the error message.