Weather App Guidance/Issues

1

Hi,

I’m struggling with the JavaScript/API aspect of the weather app and could really do with some guidance.

I’ve used the geolocation data from the free code camp challenges, but don’t know what to do with it. I’ve tried storing the values, but as soon as I try to call them I get the below errors. Am I using the wrong jQuery CDN or something?

I’m still not sure what to do once I sort it though. Ultimately, I’m just trying to get the relevant pieces of JSON data to show in each div (wind speed, humidity, degrees etc). I’m finding it hard to understand the data from the API. Does the data update with weather once I put the on & lat variables into the code somehow?

Apologies if its not clear enough in what I’m after. I’ve been working on this for a few hours now and not really getting anywhere.

https://codepen.io/KUBIX90/pen/LzrYxP

jquery.min.js:2 jQuery.Deferred exception: position is not defined ReferenceError: position is not defined
at HTMLDocument.<anonymous> (http://127.0.0.1:8080/public/App.js:11:12)
    at j (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:29999)
    at k (https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js:2:30313) undefined
r.Deferred.exceptionHook @ jquery.min.js:2
k @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
fire @ jquery.min.js:2
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
S @ jquery.min.js:3

jquery.min.js:2 Uncaught ReferenceError: position is not defined
    at HTMLDocument.<anonymous> (App.js:11)
    at j (jquery.min.js:2)
    at k (jquery.min.js:2)
2

Comment out your lon and lat variables. Then run this code

$.getJSON(weatherAPI, function(data){
      console.log(data);
});

Look inside your console, you will see an object with data from the API. Then, look where the coords are and the key name for latitude and longitude. Then place lon and lat variables within that getJSON function and update the values to match the data from the api.

var lon = position.coords.longitude; // <-- Match up with data
var lat = position.coords.latitude; // <-- Match up with data

EDIT: Added solution

Solution 
$.getJSON(weatherAPI, function(data){
  var lon = data.coord.lon;
  var lat = data.coord.lat;
  console.log('Value of longitude ' + lon);
  console.log('Value of latitude ' + lat);
});
3

All of your code from lines 15 to 22 need to be in the callback to getCurrentPosition on line 4.

navigator.geolocation.getCurrentPosition(function(position) {
  var lon = position.coords.longitude;
  var lat = position.coords.latitude;
  var weatherAPI ="https://fcc-weather-api.glitch.me/api/current?lat=" + lat + "&lon=" + lon;

  $.getJSON(weatherAPI, function(data) {
    alert(JSON.stringify(data));
  });
})
4

Thanks for the tips. I’ll give it a try this evening. I had an inkling it was something like that.

If I update the lon & lat values in the API, does the rest of the data set change in real time to reflect the current weather of those lon & lat values, is that how it works?

As you can probably guess, I am looking to incorporate other cities when clicked on, so I’m hoping my understanding of the above will help achieve this if it is correct.

Thanks

5

No. I’ve updated my response to make use of the lat and lon variables.