javascript fetch api template string

I'm trying to make an app that gives you the weather based on your location. I get the location with ipinfo, and it works. I put the location in a variable, and when I console log it it still works. But when I try to fetch data from openweathermap with that variable using a template string this is what the console shows: Uncaught (in promise) ReferenceError: currentCity is not defined
at getWeather
The problem is when I copy that link to the console it returns a link that works!
Thanks for the help

const getLocation = async () => {
const response = await fetch('http://ipinfo.io/json?token=(id given by ipinfo)')

if (response.status === 200) {
const data = await response.json()
return data.city
} else {
throw new Error('Unable to get the current location')
}
}

let currentCity


getLocation().then((city) => {
currentCity = city
document.write(currentCity)
}).catch((err) => {
// Do something with it later
})


const getWeather = async () => {
const response = await
fetch(`http://api.openweathermap.org/data/2.5/forecast?q=${currentCity}&units=metric&id=524901&APPID=(id given by openweathermap)`);

if (response.status === 200) {
const data = await response.json()
return data
} else {
throw new Error("Unable to get weather")
}
}

getWeather().then((data) => {
console.log(data)
})


1 Answer
1

There are two asynchronous call, one is getLocation() and another is getWeather().

According to the current code both of them are running asynchronously, without any sequence flow defined.

What you need is to synchronize both of them such that first location is fetched after that weather for that location is fetched.

The below is the way you can sychronize the two methods to execute one after the other.

const getLocation = async() => {
const response = await fetch('http://ipinfo.io/json?token=(id given by ipinfo)')

if (response.status === 200) {
const data = await response.json()
return data.city
} else {
throw new Error('Unable to get the current location')
}
}


const getWeather = async(currentCity) => {
const response = await
fetch(`http://api.openweathermap.org/data/2.5/forecast?q=${currentCity}&units=metric&id=524901&APPID=(id given by openweathermap)`);

if (response.status === 200) {
const data = await response.json()
return data
} else {
throw new Error("Unable to get weather")
}
}



getLocation().then((city) => {
currentCity = city;
document.write(currentCity);
return city;
}).then((city) => {
return getWeather(city);
}).then((data) => {
console.log(data)
}).catch((err) => {
// Do something with it later
})

By chaining the promises as below it is achieved. Also modified the getWeather() method to accept location as a parameter to make it a reusable unit.

getLocation().then((city) => {
currentCity = city;
document.write(currentCity);
return city;
}).then((city) => {
return getWeather(city);
}).then((data) => {
console.log(data)
}).catch((err) => {
// Do something with it later
})


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.