Async Function Help

1

Can someone explain to me why my async function is not awaiting for my getLocation function to finish?

var url = "https://fcc-weather-api.glitch.me/api/current?";
var urlTest = "https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139";
var newURL = url + 'lat=' + lat + '&lon=' + lon;
var lon;
var lat;
var name;

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      lon = parseFloat(position.coords.longitude);
      lat = parseFloat(position.coords.latitude);
      document.getElementById('location').innerHTML = "latitude: " + lat + "<br>longitude: " + lon;
    });
  }
}

function getWeather() {
  return fetch(newURL)
    .then(res => res.json())
    .then(data => 
      name = data.name
    )
}

// await is not working
async function App() {
  await getLocation();
  await getWeather();

  document.getElementById('weather').innerHTML = name
}

App()
2

Because it is not returning a Promise.

1 Like
3

Thank you for the feedback. So this is what I’ve come up with, but its still not working:

var url = "https://fcc-weather-api.glitch.me/api/current?";
var urlTest = "https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139";
var newURL = url + 'lat=' + lat + '&lon=' + lon;
var lon;
var lat;
var name;

var getLocation = new Promise((resolve) => {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      lon = parseFloat(position.coords.longitude);
      lat = parseFloat(position.coords.latitude);
      document.getElementById('location').innerHTML = "latitude: " + lat + "<br>longitude: " + lon;
    });
  }

  resolve();
})


var getWeather = new Promise((resolve) => {
  fetch(newURL)
    .then(res => res.json())
    .then(data => 
      name = data.name
  )

  resolve();
})

// await is not working
async function App() {
  await getLocation;
  await getWeather;

  document.getElementById('weather').innerHTML = name
}

App()
4

Try assigning the await functions to variables (respectively) and then call the property.
async function App() {
const location = await getLocation;
const weather = await getWeather;

document.getElementById(‘weather’).innerHTML = weather.name;
}

1 Like
5

I see. Thank you! Final question. The urlTest seems to work in the getWeather function, but newURL does not?

var url = "https://fcc-weather-api.glitch.me/api/current?";
var urlTest = "https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139";
var newURL;

var getLocation = new Promise((resolve) => {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      let lon = position.coords.longitude;
      let lat = position.coords.latitude;
      document.getElementById('location').innerHTML = "latitude: " + lat + "<br>longitude: " + lon;
      newURL = url + 'lat=' + lat + '&lon=' + lon;
    });
  }

  resolve();
})

// newURL is undefined but urlTest works
var getWeather = 
  fetch(/*urlTest/ newURL*/)
    .then(res => res.json())
    .then(data => JSON.stringify(data))
    
async function App() {
  const location = await getLocation;
  const weather = await getWeather;
  document.getElementById('test').innerHTML = newURL
  document.getElementById('weather').innerHTML = weather
}

App()
6

newURL is only defined within the getLocation function.
urlTest works because it’s been declared globally.

You want the getLocation function to return the lat and long data.

var newURL;

var getLocation = new Promise((resolve) => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
let lon = position.coords.longitude;
let lat = position.coords.latitude;
document.getElementById(‘location’).innerHTML = "latitude: " + lat + "
longitude: " + lon;

});

}

resolve();
return { lat, long };
})
newURL = url + ‘lat=’ + getLocation.lat + ‘&lon=’ + getLocation.lon;

I think this is formatted correctly.