this is my first time using openweather.com API for weather forecasts, I just want to show the following information for the next 5 days:
Min and Max temperature of each day
Weather icon
Current weather description (Drizzle, Sunny...)
Plain simple, for some reason I'm getting pretty weird results, take a look at the image bellow so you can understand (I THINK that this five results are actually of the same day, different timestamps, look at min/max temp, maybe? instead of the next 5 days...
![enter image description here](https://i.stack.imgur.com/8AdNm.jpg)
This is my code:
async getForecast()
{
let url = "https://api.openweathermap.org/data/2.5/forecast";
let payload =
{
lat: this.$app.globals.origin.lat,
lon: this.$app.globals.origin.lng,
units: 'metric',
APPID: '0feb06072d87320932559f321ca221fb',
lang:'es',
cnt:5
};
let response = await axios.get(url, { params: payload });
this.data = response.data.list;
}
In my view (Vue.js):
<div style="width:auto; height:100%; display:flex; align-items:center;">
<a style="width:auto; padding:10; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:space-around;" v-for="(item,index) in data" :key="index">
<span class="fs_smaller c_normal">{{ item.main.temp_min }} / {{ item.main.temp_max }}</span>
<span class="fs_smaller c_normal">{{ item.weather[0].description }}</span>
<img style="width:50px; height:auto;" :src="'https://openweathermap.org/img/w/'+item.weather[0].icon+'.png'">
</a>
</div>
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…