SOLVED: Having trouble getting response from Dark Sky API

JavaScript
1

Here’s the link to my pen so far:

When I copy and paste my Dark Sky API link into the browser, I get the right information. I just can’t seem to get any info in the actual code and I can’t figure out what is wrong. It works when I use fetch code for the Google Maps API, so I’m not sure why using the same code for Dark Sky would give me a different result.

This is my first time using fetch. Any input would be awesome! Thanks!

2

First let me warn you that I am by no means an expert at this - I’m learning this stuff like you.

It seems that you were having a CORS problem with your API call. Again, not an expert, but you get an error when you try to make API calls across domains. It doesn’t seem to be a problem when you type it into a browser, but for some reason the seventh seal cracks if you try to do it with JS. In the past (again, no expert) I’ve gotten around this by using JSONP formats and callback functions, but that didn’t seem to work for me in the 20 minutes I puttered away at it. (It is really frustrating how picky these things are.) I’d heard of people using proxy sites to get around CORS so I decided to give it a try here. This returned the data and seemed to match what I could see out my window.

$(document).ready(function() { 

  var proxy = 'https://cors-anywhere.herokuapp.com/';
  var apiLinkDS = "https://api.darksky.net/forecast/e6af5b5feb891b272e18f5e2fc0370a6/38,-122";

  $.ajax({
    url: proxy + apiLinkDS,
    success:function(data) { console.log(data);}
  });

});

Just replace the console.log in the success function with whatever you want to do with the data object. Good luck.

3 Likes
3

You can use mode: 'no-cors' to get rid of the CORS issue:

fetch(apiLinkDS, {
    mode: 'no-cors'
  })

and request runs fine.

Then for some reason I get Uncaught (in promise) SyntaxError: Unexpected end of input at VM1742 pen.js:58.
I’ll peep later why that is.

1 Like
4

Thanks! I’m going to try and read up on what all of this means and try your solution!

5

I ended up discovering this via user @PortableStick

The problem is that DarkSky delivers its data with a header that says, in effect, “here are the domains that can access this response”. The error says that CodePen isn’t on that access list. DarkSky did, in fact, work at one point, but they’ve since changed their policies (I wonder if all of the FCC students using their free tier had something to do with this). It sounds fishy, but in actuality accessing DarkSky directly from the client is a horrible idea and they’re not wrong in trying to deter it. Services like this are actually meant to be accessed on a server and then delivered to clients in a way that’s easier to control. This is one reason the coming curriculum refresh is going to de-emphasize AJAX.

In order to get DarkSky to work with your app, you can use cors-anywhere by putting https://cors-anywhere.herokuapp.com/ in front of your URL:

https://cors-anywhere.herokuapp.com/https://api.darksky.net/forecast/...

Fixed my problem! Relieved to find out that I wasn’t necessarily doing something wrong but that the API system that I was trying to use just wasn’t working with me. Took me long enough to figure out though :dizzy_face:

Hope this helps someone!

10 Likes
6

Yes, your quoted text is describing a CORS problem. No, you aren’t the first to beat their heads against a rock trying to figure out why the data isn’t coming back. Presumably JoolsMcFly’s version could work too - I’m sure there is a more elegant solution than the one I suggested.

Whenever you are having API problems, be sure to check your console window and you’ll see an error that says something like “no ‘access-control-allow-origin’ header is present…” when this is happening. Whenever an API doesn’t do what I want, that’s the first thing I check. Then when I get that fixed, I console.log the data to see exactly what I’m getting. APIs are frustrating - go slow and test each step.

3 Likes
7

THANK YOU SO MUCH! I’ve been trying to work this out for 5 hours… Freecodecamp should really do warn people about this on the task page.

8

Helped me out, because of your post and @PortableStick it works, thanks guys and google to help finding out :stuck_out_tongue:

9

Thank you so much, I wasted too much time on this and it was driving me crazy.

10

Must have spent 8 hours banging my head against the wall before finding this… BLESS

11

Thanks for this one! Definitely saves me a lot of time! I can actually use api libraries but I prefer a typical ajax call as the system I’m working on isn’t modular yet.

12

thanks very much bro, ur solution works great

13

I am surprised it worked for me.