freeCodeCamp Challenge Guide: Use the Twitch JSON API

freeCodeCamp Challenge Guide: Use the Twitch JSON API
0

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.

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

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

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

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

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

Thanks Lester!

It seems to work!

Nice!

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

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

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

1 Like

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

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

Hello guys Iam trying to call the twitch api and i get 0 in the console …
var xhr = new XMLHttpRequest();
xhr.open(“GET”, “https://wind-bow.gomix.me/twitch-api”, true);
xhr.send();
xhr.status;
console.log(xhr.status);
console.log (xhr.statusText);

Hey guys I’ve just completed it https://codepen.io/c0d3g0d/full/awBNoo/

It works fine but I need your feedback.

1 Like

The JSONP method is no longer applicable as twitch requires a api key now

1 Like

Hey guys,
I’m currently using Flexbox to play around with alignment, but I’m having a hard time getting it to work.

I’m trying to fit my logo and my two other paragraphs to fit inside the flex container in a row, but it keeps ending up in a column. The internet has been telling me to put it on flex-direction, justify-content etc. but it’s still not working…Any help would be great!!!

I’m also a very, very beginner at this while working on it on and off due to full time work.

Thank you,

Link below:
Twitch Api

Hey all,
I have just started this challenge and was struggling to figure out a way to pull the data from the Twitch TV API. What I was able to find out is that as of last year, they now require you to have a client ID key. As a result, this now means that you have to go to the Twitch TV website (https://dev.twitch.tv/get-started), and click on Create a Twitch Account(https://twitch.tv/signup). Once this is done, in the top right hand corner of the page, click on your username, and go to settings. From here, verify your email and then click on the connections tab.

Under the connections tab, scroll right to the bottom and click on register your application. Follow the instructions on there and at the end, you will be given a client ID key.
(for the website, I literally just linked the codepen I am using to make this work)

After this, on the Twitch website, they said an easy way to make an API call using JQuery is just to use this:

$(document).ready(function(){

$.ajax({
	type: 'GET',
	url: 'https://api.twitch.tv/kraken/channels/twitch',
	headers: {
	'Client-ID': 'your key here'
	},
	 success: function(data) {
	   console.log(data);
	 }
});

});

inspect the element and you should find the data has been called successfully!

Happy coding!

13 Likes

Hi csapty12, while this is a good solution in general where your code is private, it’s really not a good idea to publicly broadcast your api key. i.e. put it in a codepen where the whole world can see it. This is a general rule for any api you’ll be working with.

4 Likes

It seems Good but you need to consider color selection at the head.