I was working on the Twitch API project. I intend the page to show logo, name and status of different channels. If the channel is not streaming, the status is offline, but the name and logo is still displayed. However, using the https://wind-bow.gomix.me/twitch-api api, when the channel is not streaming, I can’t get relevant information about name and logo. I don’t know what to do. And when the channel is online, according to the page I can get the information I want. However, the page shows undefined.
Here’s my code.
https://codepen.io/Minyang64/pen/PKyWje
The API also has the /users/:user and /channels/:channel endpoints which provide user data. /streams/:stream provides stream data.
I set the url to /users/:user endpoint and found the name and logo information. Thank you. However, there’s another problem regarding the /streams/ end point. When I access this page with a browser, I can see a status attribute which describes the broadcast content. However, when using console.log(data) at Codepen, the data seems different. And I cannot find the status information.
You are showing me the stream object, status is in the channel object.
Oh, I see. Thank you for pointing out.
I modified my code. I intended to loop through the channels from the list with the /streams site. If the channel is not streaming, set the status to offline and go to
the /users site to get the name and logo. Otherwise get the status, name and logo from the /streams site. Also, I want the name linked to the streaming page. I still
can’t get the name and logo when the channel is offline. Using console.log(), I found the information of living channel is passed to the {stream===null} condition. I
have no idea what’s wrong with my for loop and if statement.
The response from the /users API should contain the logo and the name. Can I see your code so far?
By the time your url requests are done, your for loop has ended and url2 has the value of the last stream. There are various ways to overcome the issue, but I’d suggest you use Array.forEach for now instead of a for loop (A for loop with let instead of var would work the way you intented it to). Convert your loop like this:
and you’ll be fine with scope-wise. If you are not familiar with context and scopes in JS, please go study those concepts.
Keep in mind that in your current implementation, your page will not update with offline channel data, because your url2 requests won’t be finished before you update the UI. You’ll need to call $(’#details’).prepend() inside the url2 handler as well for the offline streams.
1 Like
Problem solved. Thank you very much.