Show the Local Weather, how to pass variable through functions?

Hey folks,

Right well my code works, as in the data I need from the API and geolocation is correct and I can access it, but how do I correctly use it? How do i pass the variables throughout the functions, now I know this is probably really stupid, but im genuinely stumped and having a HUGE brain fart. I could of copies and pasted the codes from various places and managed to get the same result but I wanted to write from scratch.

I want to get the lat and long from showPosition and be able to use it outside the function. Same goes for my URL string.
I am pleased I managed to get the data I needed, although took some times, now I have it, I need guidance on how to use it globally so to speak.

Can I pass urll variable straight to ajax url: ? Please ignore all the console.logs, its just for my own use. Please use the code and view it with the JavaScript console.

//$(document).ready(function() {
function getLocation() {
  navigator.geolocation.getCurrentPosition(showPosition); //function to get location
}

function showPosition(position) {
  var lat = position.coords.latitude; //store lat position
  var long = position.coords.longitude; //store long position 
  var urll = "https://fcc-weather-api.glitch.me/api/current?lat=" + lat + "&&lon=" + long; //the URL for weather API
  console.log(urll);
  console.log(lat);
  console.log(long);
};

getLocation();
//comment out the getweather API until geolocation is sorted
$.ajax({
  url:
    "https://fcc-weather-api.glitch.me/api/current?lat=52.5699428&lon=-2.1725411",
  success: function(data) {
    var overView = data.weather[0].main;
    var desc = data.weather[0].description;
    var currentTemp = data.main.temp;
    var far = currentTemp * (9 / 5) + 32;

    console.log("Temperature in Celius = " + currentTemp);
    console.log("Temperature in Fahrenheit = " + far);
    console.log("Current overview = " + overView);
    console.log("Current description = " + desc);
  }
});

Will also attach my pen

Thanks!

Ok I am slowly gettng there, I think so far up this point, I have been getting away with not using functions and passing arguemnts, at least ones I made myself. its all about passing arguments and then using the fucntion in other functions… Wish I thought of it this way ages ago…

I think that one thing you are not understanding is asynchronicity. You have two asynchronous functions in your code, the call to navigator.geolocation.getCurrentPosition and your ajax call.

These functions are requesting data and not waiting for an answer before they go on to the next code. The most basic way to handle this is with callback functions. You use a callback function in your ajax call (the success function) and you use one for you navigator call (showPosition). What these are saying are "go ahead and finish the rest of the program and just I’ll just call back to this callback function once I get my data back.

You have two asynchronous operations, one that depends on the other. The most basic way to handle that is to next them inside each other. So, I might have something like:

navigator.geolocation.getCurrentPosition(function(position) {
  // manipulate variables if needed
  $.ajax({
    url:
      "https://fcc-weather-api.glitch.me/api/current?lat=" + position.coords.latitude + "&lon=" + position.coords.longitude,
   success: function(data) {
     // use data object and send it to the screen
   });
});

Does that make sense? The ajax call must be inside (or called from inside) the callback to the navigator call or the variable won’t be defined yet. In your original code, you get to the ajax call before navigator gets back so it doesn’t know what those variables are.

The whole asynchronous thing is extremely important in JavaScript. Most languages are synchronous (you execute in piece of code at a time and wait for it). Because JS utilized so many asynchronous resources, this would be inefficient. So, JavaScript is asynchronous, which is why you use so many callback functions, to deal with the asynchronicity.

I think you could get rid of some of those functions. Or you could use them in place of your anonymous callbacks - it’s a stylistic choice but in the beginning I found writing directly in an anonymous callback to be clearer.

Another observation: When you define your url string, you have "&&lon=" - there should be only one ampersand.

Let us know if any of this is confusing.

Thanks alot, have read and re-read your help numerous times, I think I sort of get it…

code is working now, but I dont like everything being in my showPosition function, I have called AJAX in my showPosition so I can use lat and long. I’m working on it. Now I make another function and use that on success, I get it:)

Ok here is my updated version. I think its better and I am not getting errors, but the problem is, I am calling getInfo() but its seemingly not doing anything, I am trying to console.log things, so I can see where its going and how its being used, but im not getting anything in console now. I cant see why

var api = "https://fcc-weather-api.glitch.me/api/current?lat=";
var lat;
var long;

$(document).ready(function() {
  function getLocation() {
    navigator.geolocation.getCurrentPosition(function(position) {
      var lat = position.coords.latitude; //store lat position
      var long = position.coords.longitude; //store long position
      getInfo(lat, long);
    });
  }
});
function getInfo(long, lat) {
  var urlstring = api + lat + "&&lon=" + long;
  $.ajax({
    url: urlstring,
    success: function(data) {
      var overView = data.weather[0].main;
      var desc = data.weather[0].description;
      var currentTemp = data.main.temp;
      var far = currentTemp * (9 / 5) + 32;
      console.log(overView);
      console.log(desc);
      console.log(currentTemp);
      console.log("WHY ARE YOU NOT PRINTING");
    }
  });
}

Never mind, got it, I was not calling the function getLocation anywhere… Thanks

1 Like