Twitch TV - Set Up

1

I need help the Twitch TV - ]

Having experience the previous projects with Random Quote Machine and Weather App. This project differs because it appears that I would need to display multiple “indices” from the array provided :

[“ESL_SC2”, “OgamingSC2”, “cretetion”, “freecodecamp”, “storbeck”, “habathcx”, “RobotCaleb”, “noobs2ninjas”];

My approach initially was to iterate through the array - but I can create a function inside a loop. Here is my initial set up. I know how to evaluate each item in the array individually but I am stuck obtaining the information from the array simultaneously.

Suggestions would be appreciated…

` $(function() {
var players = [“ESL_SC2”, “OgamingSC2”, “cretetion”, “freecodecamp”, “storbeck”, “habathcx”, “RobotCaleb”, “noobs2ninjas”];

var users = [];
var url = “https://api.twitch.tv/kraken/streams”;

$.ajax ({
url: url,
parameter:
{
client_id: “9plca66vbfgmaj3narb9ebf3rxwafd0”,
data: “json”
},
type: “application/javascipt”,
method: “GET”,
success: function(data) {

 console.log(data); 

}

});

}); `

2

What do you mean by that? Did you mean ‘can’t create’? You absolutely can create a function inside a loop.

You loop through the array and make AJAX call for each array item and display received data (or save for later display).

If you mean to get data for all of the array items at once, you can’t with js - js is single threaded.

Btw, what is client_id in your ajax call? I have suspicion you have misunderstood the assignment.

3

correction -

as per CODE PEN - when I try to create the loop it states" I can not make a function inside a loop"…

when I was reading on git-hub it said to obtain a client_id in order to use the API…

4

I pasted your code in codepen and can’t see any error.

it said to obtain a client_id in order to use the API

Looks like a lot of FCC Twitch TV projects will stop working over the coming months :disappointed:

5

// twitch client Id - 9plca66vbfgmaj3narb9ebf3rxwafd0
//9plca66vbfgmaj3narb9ebf3rxwafd0

$(function() {
var players = [“ESL_SC2”, “OgamingSC2”, “cretetion”, “freecodecamp”, “storbeck”, “habathcx”, “RobotCaleb”, “noobs2ninjas”];
var users = [];

for (var i = 0; i < players.length; i++) {

var url = “https://api.twitch.tv/kraken/streams/” + players[i] + “?callback=?”;

$.getJSON(url, function (json){
 console.log(json._links.self);
  
  
});

}
});

6

Works for me.

Have you added jQuery in JS settings?

7
8

Yes I have jQuery in JS settings

9

what do you have displayed in your console.log? mine is blank

10

You have missing > in HTML line 17

11

you are incredible… adding the missing “>” solved my issues…

How did you find that???

12

It was tricky :wink:

I was getting some strange error in console. Quick google search showed that it has something to do with inner workings of Codepen (it wasn’t typical js error). So I started to comment out pieces of your js code waiting for the error to disappear.

After the whole js code was commented out, I commented out the HTML code, and the error disappeared. After that it was obvious that the error is somewhere in the HTML code :relieved:

1 Like
13

I mad some progress since yesterday -

I was able to get - the names and logos and separate them…

Can you provide some direction with distinguising those “Online” and those “Offline”…

14

These lines:

        if (json.stream) {
          $(".users").append("Offline");
        } else {
          $(".users").append("Online")
        }

are appending to elements with class users (every time!!!). That’s why you have nine times on the first element, eight times on the second etc.

You could do something like this:

        let stream = "offline"
        if (json.stream) {
          stream = "online"
        }

        $(".box").append("<br><a ... </a>" + "<div>" + stream + "</div>");
15

Thanks for your help… I did not quite understand the ‘let statement’ despite some research…

I used my basic understanding to JS and jQuery to make some really raw coding… but despite that somehow its coming together…

I am almost to the finish line…

16

Updated Twitch

17

In latest js version ES6 var is replaced with let and const - for changeable variables and non-changeable constants respectively.

18

cool… I will definitely read up on that… the world of programming new to mew as I have been learning basics of HTML, CSS and JS since 6/18/16… There is tons to learn.

You seem to be experienced- you are a great resource-- appreciated the guidance and leads…

I have one more piece to go for TWITCH TV :

  • display the accounts which are no longer available…
19

You can put the request to for a closed channel in your browser’s address bar and see what you get:

Request:
https://api.twitch.tv/kraken/streams/brunofin
Response JSON:

{
  "error": "Unprocessable Entity",
  "message": "Channel 'brunofin' is unavailable",
  "status": 422
}

So you need to check if response contains status key with value 422.

Also if you request some random string:
https://api.twitch.tv/kraken/streams/yhdnprd993
you get:

{
  "error": "Not Found",
  "message": "Channel 'yhdnprd993' does not exist",
  "status": 404
}

You can check for status 404 also.

20

Thanks for reviewing… i was messing around with it… should be fixed now…

By the way… I am having issues obtaining the accounts that are “unavailable”… Can you provide some clues or guidance… I tried

If (json.error) { console.log(json.messge); }
No results in the console… thanks

Reply