Local weather project (360 tutorial) : problem creating API URL

1

Hello all. When I run the following code my console returns the following url for the API :
"https:/api.openweathermap.org/data/2.5/weather?lat=undefined&lon=undefined&APPID=5509e4d3e24ba333ea491217acad1d3d"
which leads me to believe that the code was not run in the order I wrote it - that the api variable was defined before the if (navigator.geolocation) statement was run (there creating and API url where the long and lat variables are undefined.
How to fix this?
Thanks for your help!

$(document).ready(function() {
  
  var long;
  var lat;
 

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
    long = position.coords.longitude;
    lat = position.coords.latitude;
      $("#data").html("latitude: " + lat + "<br>longitude: " + long);
      console.log(lat)
    });
  }

  // Create API with geolocation

  var api ="https:/api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&APPID=5509e4d3e24ba333ea491217acad1d3d";
  
 console.log(api);

  
  $.getJSON(api, function(data) {
    var weatherType = data.weather[0].description;
    var kelvin = data.main.temp;
    var windSpeed = data.wind.speed;
    var city = data.name;
    
    
    
    console.log(city);
    console.log(api);
    
  });
});
2

I think you have not allow your browser to know your location. You must allow chrome to know your location otherwise it will remain undefined.

3

Hey there, actually codepen asked me straight away if I wanted to share my geolocation information, I accepted and the output shows

latitude: 12.3714277
longitude: -1.5196603

so I guess that’s not the problem :frowning:

5

Thanks for pointing out the issue. One way I got around it is to only assign the url to variable api within the navigator.geolocation.getCurrentPosition, and only call the openweather API manually, through a button, to make sure that the api variable has the correct url. I wonder what is a better way of dealing with the problem automatically (i.e I just refresh the page and the browser automatically gets my geolocation, plugs in the correct url in api, and the call is made to the openweather api).


$(document).ready(function() { 

  var long;
  var lat;
  var api;

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      long = position.coords.longitude;
      lat = position.coords.latitude;
      api ="https://api.openweathermap.org/data/2.5/weather?lat="+lat+"&lon="+long+"&APPID=5509e4d3e24ba333ea491217acad1d3d";
      $("#data").html("latitude: " + lat + "<br>longitude: " + long);
      console.log(lat)
    });
  }

  $(".getLocation").on("click", function(){

    $.getJSON(api, function(data) {
      var weatherType = data.weather[0].description;
      var kelvin = data.main.temp;
      var windSpeed = data.wind.speed;
      var city = data.name;

      console.log(city);
      console.log(api);    
    });

  });

});
6

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

7

To answer your question, putting the weather stuff inside your location callback is the better way to handle that. And then your output code goes inside the callback for the weather stuff. You are going to have to deal with asynchronicity over and over in JavaScript, you’d better get used to it now. It’s an important feature of the language. There are other ways to deal with it (e.g., promises) but trying to game the timing of it by relying on user input is setting yourself up for problems.

1 Like