Trying to fetch data from a weather API using the provided link:
The api.js file contains a basic function:
const baseUrl = `http://api.wunderground.com/api/5b81d144ae2d1942/conditions/q`;
export const getCurrent = (lat, lon) => {
return fetch(`${baseUrl}/${lon},${lat}.json`)
.then((response) => response.json())
.then((json) => {
console.log(json.current_observation.weather)
return json.current_observation
})
.catch(() => {
console.error('unable to fetch tasks')
})
}
In Vue component, calling the function as follows:
export default {
data: () => ({
currentWeather: []
}),
created: function () {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(this.showPosition);
}
},
methods: {
showPosition(position) {
const data = api.getCurrent(position.coords.longitude, position.coords.latitude);
this.currentWeather = data;
console.log(this.currentWeather);
}
}
}
The console log shows a pending Promise object, not retrieving data properly. Looking for a solution to resolve this issue.
If anyone has a code-based solution, please share. Thank you!