The Twitch API Challenge

1

I need some help with the Twitch.tv API project challenge. I’m totally stuck. I also have errors about CORS refusal so I’m worried about that too. I hope someone will point me to the right direction on what I should do.

Here’s my Pen: https://codepen.io/DragonOsman/pen/abOvqEN.

Thanks in advance.

2

If you do this:

.then(response => {
    console.log(response.status); // 200
    return response.json();
  })

You see that your app works well, it’s endpoint that doesn’t send you correct data

3

Okay, thanks. And yeah, I have a 200 response status. This is what I have now: https://codepen.io/DragonOsman/pen/abOvqEN . Am I doing I shouldn’t be in here? And if I want to try and log the whole response to see what I have and how I could get what I want from it, how do I do it correctly in this loop? With what I had before, where I was doing console.log(data) in the second .then(), I was getting only 1 length arrays that didn’t have the data I needed.

4

  1. I think you are using the incorrect endpoint. I believe you want https://wind-bow.glitch.me/helix/users?login=${streamer}

  2. You are using a for...in loop on an array. Your streamer variable is the index, not the array element. Use the for…of loop instead.

  3. You might still get a cors error. Not 100% sure what the best way to deal with it is on Codepen.

5

Yeah, thanks. I at least have the info. I just don’t get how I should display the info. Are the two divs I have enough or should I put more stuff in there first?

6

  1. You are not getting the data correctly. Log out data and see if you can figure it out (hint: data.data[0] is the object)

  2. You are using the type property in your if statement but as far as I can tell it is always an empty string. Log it out console.log(data.data[0].type)

7

This is what I have now. It’s still off. It seems I need to get deeper in. I need to do something similar to this. How do I see if a streamer is online or not? Maybe I need to use a different endpoint for that.

8

Hi,

I advise you to register on tvitch tv and get your own client-id. You need only client-id to build your own app straight from tvitch tv.
You find also documentation how to use the twitch tv api. It is not too difficult…

9

Try using insertAdjacentElement. Have a look at the docs.


10

The FCC guys want us to do without having to use the client-id. So they even have a wrapper for the base URL for the API endpoints. I’ll still get the client-id to learn it though, I guess.

11

Your endpoint works correctly now, here is what you get about each streamer:

{
  id: "152475255",
  login: "storbeck",
  display_name: "Storbeck",
  type: "",
  broadcaster_type: "",
  description: "",
  profile_image_url: "https://static-cdn.jtvnw.net/user-default-pictures-uv/ead5c8b2-a4c9-4724-b1dd-9f00b46cbd3d-profile_image-300x300.png",
  offline_image_url: "",
  view_count: 2058,
}

No information about online/offline status. I suppose you indeed need another endpoint

12

That’s in data.data[0]? So what’s the correct way to access it? Object.entries or something else? And yeah, I’ll look into the other endpoints for the online/offline data.

Edit: I’m getting these stuff printed out on the page:

view_count: 2058
view_count: 55497
view_count: 2796
view_count: 6892
view_count: 220483
view_count: 56547813
view_count: 67797
view_count: 81729500
13

You keep overwriting the innerHTML. Try concatenating the string infoDiv.innerHTML += ${key}: ${value}
;

You may have to use the cached version https://wind-bow.glitch.me/twitch-api to get to some of the data. BTW, you don’t have to use the fCC proxy API. It is not a requirement, it is just there so you don’t have to sign up for a client ID.

14

But if I use it, won’t people be able to see it?

I wonder if textContent will be good here. innerHTML always overwrites.

15

Sure if all you have is a string you can use textContent, but you still need to not overwrite it.

For this project, I’m not sure how bad it is to leak the ID. And technically you can just pass the tests and then delete the ID. Otherwise, you would have to find some solution. Like for example setting up your own backend API to proxy the requests (here is a video you can check out with an example of this).

If you just want some practice with using APIs and doing some light DOM manipulation using that API data you can find a bunch of free APIs to use.

But if you want to do this assignment I would suggest approaching it like a larger app possibly with both front and back ends and using the real Twitch API. As said, with a backend you can have it handle the API requests and your client will fetch the data through your backend. It is a lot more work but will also teach you some important stuff.

Remember this is just a pretend “take-home” assignment for you to get more practice.

16

This is what I have now. I need to show who is currently streaming, right? But I can’t figure out how to do that. Do I need a different endpoint or do I just use the description property in the data?

I tried to get an access ID but it seems I need two-factor authentication which I don’t know how to get.

17

Pretty sure you have to use the cache endpoint. The channels endpoint will give you channel info and the streams will give you stream info. On the streams endpoint, the stream property will be null if there is no stream, otherwise, it will have info on the current stream (game played, etc.).

https://wind-bow.glitch.me/twitch-api/channels/freecodecamp

https://wind-bow.glitch.me/twitch-api/streams/freecodecamp
https://wind-bow.glitch.me/twitch-api/streams/ESL_SC2
18

So it’ll be fine if I just use the streams cached endpoint? Since the stream property on that tell me if there’s a current stream going on. I’ll try this.

19

Actually, now that I look at it, you can use the https://wind-bow.glitch.me/helix/streams?user_login= endpoint. If the stream is live the data array will have an object in it with the stream info, otherwise it will be empty.

https://wind-bow.glitch.me/helix/streams?user_login=ESL_SC2
https://wind-bow.glitch.me/helix/streams?user_login=freecodecamp

You can get the user_login and user_id from the https://wind-bow.glitch.me/helix/users?login= endpoint if you want to check the id and login values.

20

Pen. I have an error in the JavaScript code, sometimes on line 19 and sometimes on line 21, saying:

Uncaught SyntaxError: missing ) after argument list

Why am I getting that and how do I fix it?

If the person is currently streaming, the data property on the object returned by /streams?user_login=<user_name> will have stuff and it’ll be an empty array otherwise, right? And the way to get to that array is data["data"]? Or what?