variables not populated with desired values

Question

I am trying to make a 'cueent weather application'. For this, in my jQuery code snippet, I use 2 variables by the name of 'latitude' & 'longitude'. When I populate them with my current location's latitude & longitude respectively, it happens so quite efficiently, as reflected in my alert popup (the one inside the 'if' statement). However, outside of this 'if' statement, the variables no longer retain their values, as shown in the 2nd alert popup.

<script>
$(document).ready(function(){
  var latitude = "";
  var longitude = "";
  if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(position){
      //alert(position.coords.latitude + " " + position.coords.longitude);
      latitude = position.coords.latitude;
      longitude = position.coords.longitude;
    });
  }
  alert(latitude + " " + longitude);
});
</script>

body {
  background-color : black;
}

.jumbotron {
  background-color : black;
  color : white;
}

<html>
<body>
  <div class="container-fluid" id="main-div">
    <div class="jumbotron text-center" id="heading-div">
      <h1 id="heading">Current Weather</hi>
    </div>
    <div class="row" id="weather-row">
      <div class="col-md-offset-4 col-md-4 col-sm-offset-3 col-sm-6 col-xs-offset-2 col-xs-8" id="weather-column">
        <div class="row" id="location-row">
          <div class="col-md-12 col-sm-12 col-xs-12" id="location-column">
          </div>
        </div>
        <div class="row" id="region-row">
          <div class="col-md-12 col-sm-12 col-xs-12" id="region-column">
          </div>
        </div>
        <div class="row" id="icon-row">
          <div class="col-md-12 col-sm-12 col-xs-12" id="icon-column">
          </div>
        </div>
        <div class="row" id="summary-row">
          <div class="col-md-12 col-sm-12 col-xs-12" id="summary-column">
          </div>
        </div>
        <div class="row" id="temp-row">
          <div class="col-md-12 col-sm-12 col-xs-12" id="temp-column">
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Following is my code ..

https://codepen.io/iamrkcheers/pen/KqxyVZ

Any help is appreciated. Thank You.

your code inside if condition is async and outside is synchronous, you should alert it inside the callback function only — Rahul Arora, Jul 07 '17 at 12:10
what I want is the values of latitude and longitude outside my callback function. How to achieve that ? — iamrkcheers, Jul 07 '17 at 12:13

Timothy Groote · Answer 1 · 2017-07-07T12:14:24.683

1

Your alert is in the wrong scope.

if(navigator.geolocation){

    //navigator.geolocation.getCurrentPosition is an asynchronous function
    //we do not know when it will be done 
    //but we can tell it what do do when it finished. 
    //this is why we pass it a function as parameter 

    navigator.geolocation.getCurrentPosition(
      //this here is your callback function : 
      function(position){
        latitude = position.coords.latitude;
        longitude = position.coords.longitude;
        alert(latitude + " " + longitude); // only here do we know what latitude and longitude are.
      }
    );

    //since we are not going to synchronously wait until the getCurrentPosition finishes
    //any statement at this point gets executed immediately.
    alert("hey!");
}

If you were to run this code, the hey alert would probably pop up first, and then the alert with the coordinates.

edited Jul 07 '17 at 12:14

answered Jul 07 '17 at 12:10

Timothy Groote

8,614
26
52

what I want is the values of latitude and longitude outside my callback function. How to achieve that ? – iamrkcheers Jul 07 '17 at 12:12
1

you already have them – Timothy Groote Jul 07 '17 at 12:14
1

but keep in mind that `latitude` and `longitude` will be empty until your callback function finishes! – Timothy Groote Jul 07 '17 at 12:16

score 1 · Answer 2 · answered Jul 07 '17 at 12:17

That is because the call to getCurrentPosition() is asynchronous where it passes the result to the position parameter in the function given as its own parameter. The alert() on the outside executes before the one on the inside, i.e., before the values are populated, the outer alert is executed with empty values.

Try for promise function using .then(alert()) for the outer alert.

variables not populated with desired values

2 Answers2