Stuck on twitch.tv app

Stuck on twitch.tv app
0

#1

Hey ya’ll,

I managed to print the data from the api to html for the online users however, the rest of the info for the users in the array are not displaying. I’ve checked the forums and some youtube tutorials to help me with this challenge so there’s bits and pieces of codes that may look familiar. Any constructive criticism would help. Thank you!


#2

It appears as though there is little info for streams if the user is not currently live streaming. For example, I simply typed in the api call into the browser for OgamingSC2 [https://wind-bow.glitch.me/twitch-api/streams/OgamingSC2] and got this as a response:

{"stream":{"_id":26119435280,"game":"StarCraft II","viewers":192,"video_height":720,"average_fps":60.0282485876,"delay":0,"created_at":"2017-08-27T21:01:40Z","is_playlist":false,"stream_type":"live","preview":{"small":"https://static-cdn.jtvnw.net/previews-ttv/live_user_ogamingsc2-80x45.jpg","medium":"https://static-cdn.jtvnw.net/previews-ttv/live_user_ogamingsc2-320x180.jpg","large":"https://static-cdn.jtvnw.net/previews-ttv/live_user_ogamingsc2-640x360.jpg","template":"https://static-cdn.jtvnw.net/previews-ttv/live_user_ogamingsc2-{width}x{height}.jpg"},"channel":{"mature":false,"partner":false,"status":"MASTER'S COLISEUM 2017","broadcaster_language":"fr","display_name":"OgamingSC2","game":"StarCraft II","language":"fr","_id":71852806,"name":"ogamingsc2","created_at":"2014-09-24T15:06:58Z","updated_at":"2017-08-28T02:34:50Z","delay":null,"logo":"https://static-cdn.jtvnw.net/jtv_user_pictures/ogamingsc2-profile_image-9021dccf9399929e-300x300.jpeg","banner":null,"video_banner":"https://static-cdn.jtvnw.net/jtv_user_pictures/ogamingsc2-channel_offline_image-1570cf4930177aa3-1920x1080.jpeg","background":null,"profile_banner":"https://static-cdn.jtvnw.net/jtv_user_pictures/ogamingsc2-profile_banner-d418aed2c0ef7d35-480.jpeg","profile_banner_background_color":"","url":"https://www.twitch.tv/ogamingsc2","views":27741071,"followers":58050,"_links":{"self":"https://api.twitch.tv/kraken/channels/ogamingsc2","follows":"https://api.twitch.tv/kraken/channels/ogamingsc2/follows","commercial":"https://api.twitch.tv/kraken/channels/ogamingsc2/commercial","stream_key":"https://api.twitch.tv/kraken/channels/ogamingsc2/stream_key","chat":"https://api.twitch.tv/kraken/chat/ogamingsc2","features":"https://api.twitch.tv/kraken/channels/ogamingsc2/features","subscriptions":"https://api.twitch.tv/kraken/channels/ogamingsc2/subscriptions","editors":"https://api.twitch.tv/kraken/channels/ogamingsc2/editors","teams":"https://api.twitch.tv/kraken/channels/ogamingsc2/teams","videos":"https://api.twitch.tv/kraken/channels/ogamingsc2/videos"}},"_links":{"self":"https://api.twitch.tv/kraken/streams/ogamingsc2"}},"_links":{"self":"https://api.twitch.tv/kraken/streams/Ogamingsc2","channel":"https://api.twitch.tv/kraken/channels/Ogamingsc2"}}

Meanwhile, I got this for storbeck [https://wind-bow.glitch.me/twitch-api/streams/storbeck]:

{"stream":null,"_links":{"self":"https://api.twitch.tv/kraken/streams/storbeck","channel":"https://api.twitch.tv/kraken/channels/storbeck"}}

Judging by the API requests Root Domain URL, it is using some third-party service on top of Twitch’s main API - more than likely to keep things simple for the sake of the tutorial. (https://wind-bow.glitch.me is not associated directly with Twitch. - The native Twitch API is api.twitch.tv as the root domain.)

Otherwise, you would have to sign up for a Twitch account and request a developer key to get access to the API.

Long story short, it’s nothing wrong with your code - the third-party API call is not returning the full amount of info for all users.

Hope that helps.


#3

You have a few problems:

#1) The following code section is a problem:

    var game= data.stream.channel.game;
    var logo=data.stream.channel.logo;
    var stream= data.stream;
    currentStatus=data.stream.channel.status;

If you look at your console, you will see the error message:

Uncaught TypeError: Cannot read property 'channel' of null   pen.js:19

The pen.js:19 reference mean on your Codepen’s JS line #19.

It it telling you that null doesn’t have a “channel” property. What is null? Well data.stream is, so there when you attempt to make this reference an error message in the console. You will notice you get the same number of these messages for the number of users which are not streaming.

You only need to declare var stream = data.stream above. The other three statements should be inside the code bock for the if statement.

#2) You have a typo here on the actual if statement

 if(stream=!null){

=! is not the same as !=

This should take care of your problems. If not, let me know when you have made your changes and someone will review your code.


#4

Read my post below yours.


#5

Thanks for the clarification. I just looked at API call and saw info was incomplete. I’m not fully familiar with the requirements of the tutorial. Sorry if I caused any confusion.


#6

Oh wow thank you so much! Everything is displaying correctly so far. If I run into any more issues I’ll update here. Thanks again!


#7

So far the only other issue is I’m not sure how to display the logos for all existing channels regardless if they are online or offline. Other than that I think I fulfilled the requirements for the challenge. I would really appreciate if you can help with that issue.


#8

It looks like all are displaying now.


#9

I phrased my question weird. The example twitch.tv project shows the logo for channels that are online.

However, the logo is still visible if the channel is offline. For example, the freecodecamp channel logo is still visible even though it is offline.

Whereas my project, if the channel is offline, the no image placeholder would be displayed. I tried to create a new else if statement to fix that issue, but I end up with no images or logos displaying.


#10

OK, now I understand. Let me take a look and get back with you.


#11

OK. When a user’s stream is offline, you will not get the logo information back from the json data. The best way to get all the logos is two first make a call to the https://wind-bow.glitch.me/twitch-api/users/username to get all the user’s info (with the logo being one of them). Next, you would make the call to the streams like you currently do in your code. You would need to store the logo information in some way (i.e an array or an object) for use in conjunction with your forEach of your users array.


#12

Thanks again! I’ll post here if I get confused.