Twitch API access errors

Code Feedback
1

I am trying to access the Twitch API and am constantly running into difficulties.

Apparently Twitch has changed it’s settings so that you now need to include a header containing your Client-ID. I registered with Twitch and now I have my client ID number.

This is my code:

$.ajax({
type: “POST”,
url: "https://api.twitch.tv/kraken/streams/freecodecamp?callback=?",
headers: {“Client-ID”: “myClientIDNumberHere”},
success: function(data){
var userData = data;
console.log(userData);
}
})

All I get is error 400 bad request!

This happens when I’m in Codepen and also working in Sublime and saving on a localhost.

I’m really stuck and don’t know what I’m doing wrong.

Any ideas?

2

You are using a POST request. I suppose you want to make a GET request?

3

url: “https://api.twitch.tv/kraken/streams/” + channel,
method: “GET”,

In your scenario channel would be “freecodecamp”
This is what I’ve used to make my app.

hope it helps

4

I’ve tried it with both POST and GET and both of them produce the same results ie Error 400 bad request. :frowning:

I’ve also tried different urls with both freecodecamp and other channels but I get the same error every time.

5

Did you remove the “?callback=?” part of your url as I suggested?

6

Have you tried to include client code in your url?

7

http://forum.freecodecamp.com/t/twitch-viewer-used-to-work-did-something-change/37352/16?u=azdrian

8

Thanks so much for the help everyone. It finally works with this code:

$.ajax({
type: “GET”,
url: "https://api.twitch.tv/kraken/streams/freecodecamp?client_id=MyClientID?callback=?",
headers: {“Client-ID”: “MyClientID”},
success: function(data){
var userData = data;
console.log(userData);
}
})

If I put the client ID in the url and remove the header option it didn’t work, it only works with the ID in both the url and in the header.

I really think that the documentation needs to be clearer about this change, with explanations of where to put the client ID.

9

It should work without the ID in the url. I decided to update my Twitch with a client ID and this works for me:

$.ajax({
  url: 'https://api.twitch.tv/kraken/channels/' + channel,
  headers: { "Client-ID" : "Client-ID" }
}).done(function(data){
    // Or use succes: 
}
10

Not for me, I’ve just tried again and I still get error 400 bad request.
Wonder why it works that way for you and not me?

11

Ah, that’s weird. No idea why it wouldn’t work for you.

12

If you use client_id in header you should remove not only client_id from the url but also callback=?

13

Oh ok I’ve worked it out.

These are the options:

  1. Remove ?callback=? from the url and put the client id in url
  2. Remove ?callback=? from the url and put client id in header

So basically it works without ?callback=? in the url.

Funny because I read somewhere that that was necessary to use ?callback=? in the url to overcome CORS issues.

I kinda wish there was one place to read all the info about getting data from the api’s. I find the most time consuming part of these projects is understanding each different api setup and what to include in the url, more so than the actual JS itself. Is that normal?

14

Hello! I have a similar problem. Could you help me because I don’t know what’s is wrong with my code http://codepen.io/flopy_dv/full/RGALvW/

15

Try changing the data type to json instead of jsonp and see if that works?

16

Lines 11 and 55 should be dataType: "json", (pay attention to quotes)

17

Thank you for sending me in the right direction to fix this. I still have a problem with 404: Not Found and my previous message of Unprocessed Entity is not working.
Neither is status === 404 or “Not Found”.

Do you have a suggestion on how to fix this?

Thank you.

18

This topic really made my day. I couln’t get this to work neither with the “headers”, adding the client_id to the url fixed it. Thanks!

1 Like