async function getWeatherAW(woeid) {
const result = await fetch(
`https://cors-anywhere.herokuapp.com/www.metaweather.com/api/location/${woeid}/`
);
const data = await result.json();
console.log(data)
//document.getElementById("weather").innerHTML = await result.json;
}
getWeatherAW(44418);
document.getElementById("weather").innerHTML = getWeatherAW(44418);
So my question is, how do i get the same response i get in console (api response with data) written inside html?
The value assignment needs to be inside the function.
async function getWeatherAW(woeid) {
const result = await fetch(
`https://cors-anywhere.herokuapp.com/www.metaweather.com/api/location/${woeid}/`
);
const data = await result.json();
document.getElementById("weather").innerHTML = data.time;
}
getWeatherAW(44418);
You forgot to return the data and await
for it.
Nota bene - async funtions always return a promise!
Therefore
*.innerHTML = getWeatherAW(id) --> [object Promise]
*.innerHTML = await getWeatherAW(id) --> dataThatThisPromiseResolved
async function getWeatherAW(woeid) {
const response = await fetch(
`https://cors-anywhere.herokuapp.com/www.metaweather.com/api/location/${woeid}/`
);
const responseBody = await response.json()
return JSON.stringify(responseBody)
}
(async function updateDom() {
document.getElementById("weather").innerHTML = await getWeatherAW(44418);
})()