CODEWITHSUNDEEP
javascripthtmlapigeolocation
Ashis Sahoo
Ashis Sahoo

Reputation: 104

JavaScript issue with global variable assignment

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 + "°";
        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>

Upvotes: 0

Views: 59

Answers (1)

Barmar
Barmar

Reputation: 781058

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>

Upvotes: 1

Related Questions