JavaScript issue with global variable assignment

Question

I'm trying to create a weather widget using below code snippets. However, the global variables longitude and latitude values are not getting updated in the success function. I have tried all the combinations of globalThis and window objects but yet not been able to resolve the issue.

setInterval(showWeather, 900000);
setTimeout(showWeather,1000)

function showWeather(){
    var appid = "API_KEY_FOR_OPENWEATHERMAP";
    var latitude = 0;
    var longitude = 0;
        
    function success(position){
        window.latitude = position.coords.latitude;
        window.longitude = position.coords.longitude;
    }

    function error(){
        console.log('Some error occurred while retrieving your device location! Hence showing the default location weather!')
    }

    if(navigator.geolocation){
        navigator.geolocation.getCurrentPosition(success, error);
    }else{
        console.log("Your device doesn't support geolcation tracking! Hence showing the default location weather!")
    }
    
    async function fetchWeather(){
        var url = `https://api.openweathermap.org/data/2.5/weather?lat=${window.latitude}&lon=${window.longitude}&appid=${appid}&units=metric`
        const response = await fetch(url);
        data = response.json();
        return data
    }

    fetchWeather().then(response=>{
        const icon = response.weather[0].icon;
        document.getElementById("city").innerHTML = response.name;
        document.getElementById("temp").innerHTML = response.main.temp + "&deg;";
        url = `https://openweathermap.org/img/w/${icon}.png`;
        document.getElementById("wicon").src = url;
    })
}

<h5 id="city">User Location</h5>
<div>
  <img id="wicon" src="https://openweathermap.org/img/w/01d.png" alt="Weather icon">
  <strong id="temp">Temperature&deg;</strong>
</div>

Why do you have local variables latitude and longitude that you don't use? That confused me at first. — Barmar
– Barmar, Commented Sep 23, 2021 at 20:43
I wanted to show default location details even if there are some errors. Due to which I've decided to declare global variables with default values and fetchWeather function should be called irrespective of any error to show default values. — Ashis Sahoo
– Ashis Sahoo, Commented Sep 23, 2021 at 21:40

Barmar · Accepted Answer · 2021-09-23 21:11:00Z

1

getCurrentPosition() is asynchronous, but you're not waiting for it to finish before using the results. You should call fetchWeather() from the success() function, since that's called when getCurrentPosition() finishes.

There's no need to use global variables for latitude and longitude. Pass them as arguments to fetchWeather().

setInterval(showWeather, 900000);
setTimeout(showWeather, 1000)

function showWeather() {
  var appid = "API_KEY_FOR_OPENWEATHERMAP";

  function success(position) {
    let latitude = position.coords.latitude;
    let longitude = position.coords.longitude;
    fetchWeather(latitude, longitude).then(response => {
      const icon = response.weather[0].icon;
      document.getElementById("city").innerHTML = response.name;
      document.getElementById("temp").innerHTML = response.main.temp + "&deg;";
      url = `https://openweathermap.org/img/w/${icon}.png`;
      document.getElementById("wicon").src = url;
    })
  }

  function error() {
    console.log('Some error occurred while retrieving your device location! Hence showing the default location weather!')
  }

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success, error);
  } else {
    console.log("Your device doesn't support geolcation tracking! Hence showing the default location weather!")
  }

  async function fetchWeather(latitude, longitude) {
    var url = `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=${appid}&units=metric`
    const response = await fetch(url);
    data = response.json();
    return data
  }
}

<h5 id="city">User Location</h5>
<div>
  <img id="wicon" src="https://openweathermap.org/img/w/01d.png" alt="Weather icon">
  <strong id="temp">Temperature&deg;</strong>
</div>

edited Sep 23, 2021 at 21:11

answered Sep 23, 2021 at 20:49

Barmar

789k57 gold badges554 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Githendra McShane Over a year ago

Hi, Im asking for the curious, "but you're not waiting for it to finish before using the results", But here he passes it as a call back right?

Barmar Over a year ago

success is the callback, but fetchWeather is not.

Ashis Sahoo Over a year ago

Is there a way to show default location details irrespective of any error or exception?

Barmar Over a year ago

You could call fetchWeather() with default locations from the error() function.

Ashis Sahoo Over a year ago

I wrapped the fetchWeather() function inside another function, then making calls using the outer function, and it working with the default global values

Collectives™ on Stack Overflow

JavaScript issue with global variable assignment

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related