# The Twitch API Challenge

**URL:** <https://forum.freecodecamp.org/t/the-twitch-api-challenge/349667>\
**Category:** General\
**Created:** [February 12, 2020, 4:48pm UTC](https://forum.freecodecamp.org/t/the-twitch-api-challenge/349667 "2020-02-12T16:48:48Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![DragonOsman](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dragonosman/32/133600_2.png) [@DragonOsman](https://forum.freecodecamp.org/u/DragonOsman)\
**Post date:** [February 12, 2020, 4:48pm UTC](https://forum.freecodecamp.org/t/the-twitch-api-challenge/349667/1 "2020-02-12T16:48:48Z")

</div>

I need some help with the [Twitch.tv](http://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](https://codepen.io/DragonOsman/pen/abOvqEN).

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![snigo](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/snigo/32/128765_2.png) [@snigo](https://forum.freecodecamp.org/u/snigo)\
**Post date:** [February 12, 2020, 4:55pm UTC](https://forum.freecodecamp.org/t/the-twitch-api-challenge/349667/2 "2020-02-12T16:55:08Z")

</div>

If you do this:

```auto
.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

---

<div class="post-metadata">

**Author:** ![DragonOsman](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dragonosman/32/133600_2.png) [@DragonOsman](https://forum.freecodecamp.org/u/DragonOsman)\
**Post date:** [February 12, 2020, 5:11pm UTC](https://forum.freecodecamp.org/t/the-twitch-api-challenge/349667/3 "2020-02-12T17:11:46Z")

</div>

Okay, thanks. And yeah, I have a 200 response status. This is what I have now: [https://codepen.io/DragonOsman/pen/abOvqEN](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.

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [February 12, 2020, 5:36pm UTC](https://forum.freecodecamp.org/t/the-twitch-api-challenge/349667/4 "2020-02-12T17:36:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![DragonOsman](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dragonosman/32/133600_2.png) [@DragonOsman](https://forum.freecodecamp.org/u/DragonOsman)\
**Post date:** [February 12, 2020, 6:07pm UTC](https://forum.freecodecamp.org/t/the-twitch-api-challenge/349667/5 "2020-02-12T18:07:39Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [February 12, 2020, 6:48pm UTC](https://forum.freecodecamp.org/t/the-twitch-api-challenge/349667/6 "2020-02-12T18:48:12Z")

</div>

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)`

---

<div class="post-metadata">

**Author:** ![DragonOsman](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dragonosman/32/133600_2.png) [@DragonOsman](https://forum.freecodecamp.org/u/DragonOsman)\
**Post date:** [February 12, 2020, 7:11pm UTC](https://forum.freecodecamp.org/t/the-twitch-api-challenge/349667/7 "2020-02-12T19:11:02Z")

</div>

[This](https://codepen.io/DragonOsman/pen/abOvqEN) 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](https://codepen.io/freeCodeCamp/full/Myvqmo). How do I see if a streamer is online or not? Maybe I need to use a different endpoint for that.

---

<div class="post-metadata">

**Author:** ![lendoo](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lendoo/32/177827_2.png) [@lendoo](https://forum.freecodecamp.org/u/lendoo)\
**Post date:** [February 12, 2020, 7:20pm UTC](https://forum.freecodecamp.org/t/the-twitch-api-challenge/349667/8 "2020-02-12T19:20:38Z")

</div>

Hi,

I advise you to register on [tvitch tv](https://dev.twitch.tv/docs/authentication) 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…

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [February 12, 2020, 7:22pm UTC](https://forum.freecodecamp.org/t/the-twitch-api-challenge/349667/9 "2020-02-12T19:22:14Z")

</div>

Try using `insertAdjacentElement`. Have a look at the docs.

> **[Element.insertAdjacentHTML()](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML)**
>
> The insertAdjacentHTML() method of the Element interface parses the specified text as HTML or XML and inserts the resulting nodes into the DOM tree at a specified position. It does not reparse the element it is being used on, and thus it does not...

  

> **[Element.insertAdjacentElement()](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement)**
>
> The insertAdjacentElement() method of the Element interface inserts a given element node at a given position relative to the element it is invoked upon.

---

<div class="post-metadata">

**Author:** ![DragonOsman](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dragonosman/32/133600_2.png) [@DragonOsman](https://forum.freecodecamp.org/u/DragonOsman)\
**Post date:** [February 12, 2020, 7:22pm UTC](https://forum.freecodecamp.org/t/the-twitch-api-challenge/349667/10 "2020-02-12T19:22:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![snigo](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/snigo/32/128765_2.png) [@snigo](https://forum.freecodecamp.org/u/snigo)\
**Post date:** [February 12, 2020, 7:23pm UTC](https://forum.freecodecamp.org/t/the-twitch-api-challenge/349667/11 "2020-02-12T19:23:16Z")

</div>

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

```auto
{
  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

---

<div class="post-metadata">

**Author:** ![DragonOsman](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dragonosman/32/133600_2.png) [@DragonOsman](https://forum.freecodecamp.org/u/DragonOsman)\
**Post date:** [February 12, 2020, 7:30pm UTC](https://forum.freecodecamp.org/t/the-twitch-api-challenge/349667/12 "2020-02-12T19:30:59Z")

</div>

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:

```auto
view_count: 2058
view_count: 55497
view_count: 2796
view_count: 6892
view_count: 220483
view_count: 56547813
view_count: 67797
view_count: 81729500

```

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [February 12, 2020, 7:49pm UTC](https://forum.freecodecamp.org/t/the-twitch-api-challenge/349667/13 "2020-02-12T19:49:25Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![DragonOsman](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dragonosman/32/133600_2.png) [@DragonOsman](https://forum.freecodecamp.org/u/DragonOsman)\
**Post date:** [February 12, 2020, 7:54pm UTC](https://forum.freecodecamp.org/t/the-twitch-api-challenge/349667/14 "2020-02-12T19:54:42Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [February 12, 2020, 8:09pm UTC](https://forum.freecodecamp.org/t/the-twitch-api-challenge/349667/15 "2020-02-12T20:09:28Z")

</div>

> [@DragonOsman](#):
>
> I wonder if `textContent` will be good here. `innerHTML` always overwrites.

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

> [@DragonOsman](#):
>
> But if I use it, won’t people be able to see 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](https://www.youtube.com/watch?v=zAqvTmJQn7o) 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](https://github.com/public-apis/public-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.

---

<div class="post-metadata">

**Author:** ![DragonOsman](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dragonosman/32/133600_2.png) [@DragonOsman](https://forum.freecodecamp.org/u/DragonOsman)\
**Post date:** [February 13, 2020, 1:17pm UTC](https://forum.freecodecamp.org/t/the-twitch-api-challenge/349667/16 "2020-02-13T13:17:30Z")

</div>

[This](https://codepen.io/DragonOsman/pen/abOvqEN) 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.

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [February 13, 2020, 1:50pm UTC](https://forum.freecodecamp.org/t/the-twitch-api-challenge/349667/17 "2020-02-13T13:50:21Z")

</div>

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.).

```auto
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

```

---

<div class="post-metadata">

**Author:** ![DragonOsman](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dragonosman/32/133600_2.png) [@DragonOsman](https://forum.freecodecamp.org/u/DragonOsman)\
**Post date:** [February 13, 2020, 2:54pm UTC](https://forum.freecodecamp.org/t/the-twitch-api-challenge/349667/18 "2020-02-13T14:54:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [February 13, 2020, 3:19pm UTC](https://forum.freecodecamp.org/t/the-twitch-api-challenge/349667/19 "2020-02-13T15:19:34Z")

</div>

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.

```auto
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.

---

<div class="post-metadata">

**Author:** ![DragonOsman](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/dragonosman/32/133600_2.png) [@DragonOsman](https://forum.freecodecamp.org/u/DragonOsman)\
**Post date:** [February 13, 2020, 3:48pm UTC](https://forum.freecodecamp.org/t/the-twitch-api-challenge/349667/20 "2020-02-13T15:48:12Z")

</div>

[Pen](https://codepen.io/DragonOsman/pen/abOvqEN). I have an error in the JavaScript code, sometimes on line 19 and sometimes on line 21, saying:

```auto
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?

[Next page](https://forum.freecodecamp.org/t/the-twitch-api-challenge/349667.md?page=2)