I am trying to retrieve weather data from an API by using a JavaScript script on the client side. This is how the code looks like:
<script>
async function fetchWeatherData(){
var url = "http://www.7timer.info/bin/api.pl?lon=-3.57&lat=40.49&product=astro&output=json";
var weather_data = await fetch(url);
var weather_json = await weather_data.json();
return weather_json.dataseries[0].temp2m;
}
document.write(await fetchWeatherData());
</script>
Unfortunately this code doesn't work as I expected. A very similiar Node.JS/Express works great on the server side:
export async function getTemperature(iata){
let latLong = latLongAirports.find(el => el.iata === iata);
var url = "http://www.7timer.info/bin/api.pl?lon=" + latLong.long + "&lat=" + latLong.lat + "&product=astro&output=json"
const response = await fetch(url);
const jsonTemperature = await response.json();
return jsonTemperature.dataseries[0].temp2m;
}
What am I missing or not understanding between the client/server side codes?
the problem ist that you can´t use "top level async" in normal script tags. you need to declare your script tag as type="module". Then it will work like you expect it.
<script type="module">
async function fetchWeatherData(){
var url = "http://www.7timer.info/bin/api.pl?lon=-3.57&lat=40.49&product=astro&output=json";
var weather_data = await fetch(url);
var weather_json = await weather_data.json();
return weather_json.dataseries[0].temp2m;
}
document.write(await fetchWeatherData());
</script>