Finished Twitch API project. Though having issue with "Comster404" and "Brunofin"

Okay after a lot of moaning and head smashing I’ve pretty much finished it.

One issue that I cannot solve is that comster404 and brunofin come up as undefined. I cannot grab their data and list their username or anything. Can anybody please point me in the right direction?

Sorry, I’m too tired right now to go through your code and I have to work in the morning, but I will say that yes, there is quite a gap between the lessons and the builds. The Twitch problem was especially confusing for me, compounded by the fact that I wasn’t completely sure what twitch is.

If no one has tackled this by tomorrow night, I’ll take a stab when I get home from work.

Hang in there.

I appreciate the response, thats okay. Yes, hopefully! Goodnight!

The users comster404 and brunofin come up as undefined

They came up as undefined because they either do not exist, have their account closed or banned.

If you looked at your browser’s developer console [F12]:

You’re getting a 404 status response:

Which means close to what the message property value is; channel does not exist.


Can anybody please point me in the right direction?

So what can you do in this situation?

  • You can ignore undefined responses.
  • Or create another if statement to handle the undefined case:
if (data.response === undefined) {
  // The user does not exist. 
  // Do something about it here. (Display that user account is closed)
}

Thank you. Though I’m not too sure where to handle it, like whereabouts in the ajax call. I tried various things but can’t get it right. I still have trouble with understanding scope.

I’m not too sure where to handle it, like whereabouts in the ajax call.

Your code already includes an error handler:

      error: function(err) {
        $("#followerInfo").prepend(
          "<div class='row'>" +
            "<div class='col-sm-3'>" +
            "<img src='" +
            logoError +
            "'>" +
            "</div>" +
            "<div class='col-sm-3'> " +
            "Unidentified User" +
            "</div>" +
            "<div class='col-sm-3'>" +
            "Not found" +
            "</div>" +
            "<div class='col-sm-3'> " +
            "N/A" +
            "</div> </div>"
        );
      }

This is where you can handle 404 responses; the undefined values.


To make it more expressive, you could:

  • Change "Unidentified User" to username which will be the channel’s username.
  • Change "Not found" to "Account Closed".

If you want to see the AJAX response inside your error function:

console.log(err.responseJSON); inside the error function’s block scope.


I still have trouble with understanding the scope.

I think you’re doing a great job dealing with your AJAX calls and handling each scope correctly.
As long as you got it working, don’t worry about it too much for now.

Take note on what you would like to understand better while working, and reflect upon later when you’re done. You can take a “project” break to understand those concepts a little bit better if you want, then do your research. But don’t be distracted about it too much while you do your work.

In case if you wondered if there is an easy way to get the username for undefined channels:

In your ajax call, add another property with the value of the current username:


$.ajax({
      type: "GET",
      url: "https://api.twitch.tv/kraken/channels/" + streams[i],
      username: streams[i], // streams[i] is the current username.
      headers: {
        "client-ID": "11b19x9jazqim6mkvxytq7kann829k"
      }, ... )

And inside your error handler, you can access this by:

      error: function(err) {
        let username = this.username;
        console.log(username); // The current username.
        ...
      }
1 Like

Dude, thanks so much for your help! Really appreciate it :slight_smile:

I’ve learnt a great deal from this project which was really great.