Help using API's in Codepen

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.

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/

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

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

Alright! Thank you I will try that!

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?

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.
})

2 Likes

Thanks, I’ll try that!

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