[Vuejs]-How to modify nested JSON data with Vue and Vue Resource

by

0👍

✅

You shouldn’t hardcode the 0-index when parsing your data (and setting it to this.temperatures and this.times). Instead, since forecast is the same as forecasts[i] at any cycle of the loop, do:

section#weather
  ul
    li(v-for='forecast in forecasts')
      p.time Time: {{ forecast.dt}}
      p.temperature Temperature: {{ Math.round(forecast.main.temp) }}º
      p.description Description: {{ forecast.weather[0].description }}
      img.icon(v-bind:src="'https://openweathermap.org/img/w/' + forecast.weather[0].icon + '.png'")

And your fetchData() becomes simply:

fetchData: function () {                    
  this.$http.get('http://api.openweathermap.org/data/2.5/forecast?q=london&units=metric&appid=YOURAPIKEY')
    .then(response => this.forecasts = response.data.list)
}

Leave a comment