Help using API's in Codepen

1

Hello everybody, I am just wondering if you can help me with something I asked in the help chat but nobody could get it to work. I am currently working on “Use the Twitch.tv JSON API” and I am having problems with getJSON and ajax in codepen this is not the first time I had this problem I had it when I was making the weather app project and it is broken now it was working but the next day it stopped working. This is my code:
$.getJSON(‘https://wind-bow.hyperdev.space/twitch-api/streams/ESL_SC2’, function(data) {
console.log(data);
})
And here is a link to the codepen:

I decided to take a look at the console in chrome dev tools and this is the error I got “XMLHttpRequest cannot load https://wind-bow.hyperdev.space/twitch-api/streams/ESL_SC2. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://s.codepen.io’ is therefore not allowed access.”

Any help will be highly appreciated.

2 
Try this:

    function queryAPI(user, obj, callback){
      $.ajax({
        url: 'https://wind-bow.hyperdev.space/twitch-api/' + obj + '/' + user,
        dataType: 'jsonp',
        success: function(data) {
          callback(data);
        }
      });

Cross origin requests can be tricky at times.

For other projects I also had success using https://crossorigin.me/

3

Forgot to mention, you’d call the function like this;

queryAPI('some-user', 'streams', function(data){
...
}
4

Alright! Thank you I will try that!

5

hey guys, I’m working on the weather app. I understand how to get the geolocation of a user but want to convert that information (lat/long) into city and state. I’m thinking of using the google maps api in order to do this but haven’t been able to work it into my pen using $getJSON. Anyone know how to use this API with codepen?

6

Look at the instructions again and use the provided URL to get around cross domain issues, then you can easily grab the data from the returned JSON:

I assigned my lat&lon to variables and then just got that this way:

$.getJSON(“https://fcc-weather-api.glitch.me/api/current?lat="+lat+"&lon=”+lon,function(data){
//what to do with the data, such as assign to variables etc.
})

7

Thanks, I’ll try that!

8

I used https://wind-bow.gomix.me/twitch-api/channels which is working well.