freeCodeCamp Challenge Guide: Use the Twitch JSON API

Guide
#43

just an FYI -

I did a copypasta into Sublime Text 3 with all the necessary html markup and it will not run your NAV/links functions in Microsoft Edge 38.14393.0.0.

#44

did you use redux? i can’t get the data from API because i’m getting a status of 400

#45

Now that I have my client-ID how do i call to the api and get the JSON? This has proven to be the hardest of the front-end projects.
Really hoping this is an active forum and i’ll get a reply today

1 Like
#46

Is anyone having issues with the “account closed” portion of this project? I put in some bogus channels for a streams request, and get the same data as if it was any person who is offline. But if I put in a channels request with the same name, I get nothing when I console.log(data).

Is there some way I can include this? Checking for null or undefined doesn’t get me what I need.

Edit: I fixed it!

If anyone else comes across this issue in the future, it’s because the .getJSON api call needs a .fail handle. If you put a .fail(function(error) {}) to the end of your api call, you can get a ton of data from the error set, but error.responseJSON gives you something like:

Object {
error: “Not Found”,
message: “Channel ‘comster404’ does not exist”,
status: 404
}

and then you can use that data for your project.

#47

Thanks for posting. I didn’t know that Heroku thing existed, very handy.

#48

hi, I didn’t understand this line above: "instead of using Twitch’s API, we recommend hard-coding this JSON3.0k into your app as a variable. It is a series of responses for different accounts from Twitch."
you mean we make a variable and get the fixed result from that variable? if yes then what is the point of this challenge? doesn’t this make writing this app far easier than previous challenges?

3 Likes
#49

hi there. I also had the same question… FreeCodeCamp even created a fake twich api… Well, I realized only a few of the legitimate Twitch APIs are available from codepen.io, very few… And you do need to sign up and get your Client id from the api provider. Other than that, I got tired of it, even grabbed some api responses I got from a PHP api requester I wrote as herokuapp. And finally pasted that JSON data to my codepen app. Whatever, was a hell of a challenge, took me too long! an entire week. But learned a lot from all these limitations. Particularly that hosting apps in codepen for doing this kind of projects is not the best scenario. Heroku is a better choice, you have better control of your resources. So much for it… gotta stick with the game rules at freecodecamp.

1 Like
#50

Thanks for this information zelite. However, when I want to get a Client ID on Twitch, it asks me for a “Redirect url”, and I don’t know what it is. Can you please help me on this one?
Thanks

#51

On the redirect URL I just put the url where I have my project live. However, I think it does not matter what you put there. That’s only important if you need the users of your app to authenticate with their twitch accounts. Then they are sent to the twich website, they login and are redirected back to your application. Since in this project the data you are accessing does not require anyone to be logged in, you should not need to worry about that.

#52

I think freeCodeCamp pen is not working properly. That StarCraft channel is offline but it appears online on the pen.

#53

Regarding https://wind-bow.gomix.me/twitch-api
Can we request data for multiple channels instead of sending individual requests for each one?

#54

I try to get online streams from the twitch api.
For example:

I will get stream infos about Quin69. So first i want to get the _id of the account like this:
"https://wind-bow.glitch.me/twitch-api/users/quin69"
That’s works fine, i’ll get the following response:

{"display_name":"Quin69","_id":56649026,"name":"quin69","type":"user","bio":"Professional Kiwi Gamer.","created_at":"2014-02-12T11:14:23Z","updated_at":"2017-06-09T11:03:56Z","logo":"https://static-cdn.jtvnw.net/jtv_user_pictures/quin69-profile_image-6db6991ad34ac480-300x300.jpeg","_links":{"self":"https://api.twitch.tv/kraken/users/quin69"}}

But when i then try to get the stream of his ID like this:
“https://wind-bow.glitch.me/twitch-api/streams/56649026”

I always get the following response, despite he’s actually streaming:

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

I have this Problem with alle users so far.

Anybody knows a solution?

1 Like
#55

Same to me. I’ve been looking around FCC and it feels like this project is deprecated. So I’m doing it as an exercise. I will try to make an app simulating what it would be like if we had access to the real API.

When I have a decent version I will post it.

2 Likes
#56

try using the name followed by ?callback=? to get the stream

for example:
"https://wind-bow.glitch.me/twitch-api/streams/quin69?callback=?"

1 Like
#57

Thanks Lester!

It seems to work!

Nice!

#58

You’re welcome. I also just found that solution somewhere.

#59

But How do I get users’ online status from the returned json data?

#60

you need to look to see if the user has an active stream

1 Like
#61

Thanks @fentablar inactive users return “stream:null” right?

#62

iirc, if it’s a legit user acct the stream would come back as null, but if it’s not a legit user I think it comes back as undefined.

EDIT: that’s going from memory tho, you should run some tests in the console to check