How to call weather API with navigator.geolocation obtained latitude and longitude?

Question

I'm trying to build a pure JS weather application using the Geolocation API and the Dark Sky API. I'm very new to JavaScript but super willing to learn. I managed to get the user's position with the script provided on the MDN website. You can see my code here (I know JS code should be in a separate file—I'll change it when everything runs smoothly).

Here's my question: how can I call the Dark Sky API with user-specific latitude and longitude? I'm not sure how to write the XMLHttpRequest.

Here's an (excuse me in advance) attempt:

function getWeather() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET","https://api.forecast.io/forecast/30e55c9dada04d2fd66fb43429ff2c51/" + lat + "," + long + ,false);
    output.innerHTML = "<p>"xhr"</p>"
  }
xhr.send();

I guess I have to put the getWeather function inside of the getPosition function because both the variables that interest me (lat, long) are defined locally. When I add the getWeather function inside of the script, getPosition doesn't run anymore and I'm not sure how to check whether the getWeather function call was successful.

Thanks for the help!

Have you seen this post: http://stackoverflow.com/questions/247483/http-get-request-in-javascript ? — David Tansey, Aug 26 '15 at 17:47

score 0 · Answer 1 · answered Aug 26 '15 at 18:46

In order to make your debugging life easier, you will need to learn to use browser tools to inspect your webpage in the browser. Most browsers will show developer tools if you press F12.

The data you're looking for is in the xhr variable. Depending on the format of the response you may have xhr.responseText, xhr.responseXml, etc. You may even have an error code.

If you want to temporarily expose the xhr object to the global scope for ease in debugging you simply need to replace "var xhr =" with "window.xhr =".

You should inspect your xhr object and become familiar with it and the developer tools available.

Note: Your request is synchronous. This is considered bad practice because it is blocking and can cause bad user experience.

Best of luck!

How to call weather API with navigator.geolocation obtained latitude and longitude?

1 Answers1