Vue.js, How to get a list of latitude and longitude of a nested json file troughouth a function?

Question

If i use getcoords() , returns always just the first latitude and longitude for all my array length.

If i use normal syntax {{fire.latitude}},{{fire.longitude}} returns all latitudes and longitudes.

i don't know why, probably a very simple thing

this is the first problem that write, i hope to be was clear. thanck all for the help .

<template>
  <div>
    <div v-for="(fire, index) in fires" :key="index">
      <!-- {{index}}.{{getCoords()}} -->
      {{fire.lat}},{{fire.lon}}
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
    name: 'FiresList',
  data () {
    return {
      fires: null,
      errored: false,
    }
  },
  mounted () {
    axios.get('https://storage.googleapis.com/public.storykube.com/start2impact/fires.json')
      .then(response => {
        this.fires = response.data.map((coords)=> {
          return {lat: coords.latitude, lon: coords.longitude, date: coords.date}
        })
        console.log(this.fires);
      })
      .catch(error => {
        console.log(error)
        this.errored = true
      })
  },
  methods: {
    getCoords (){
      for (var latlon in this.fires){
        return [this.fires[latlon].lat, this.fires[latlon].lon]

      //OTHERWISE

      // for (let i = 0; i <= this.fires.length; i++){
      // return [this.fires[i].lat, this.fires[i].lon]
      }
    }
  }
}
</script>

<style scoped>
</style>

Answer 1

I think what you are looking for is this:

<div v-for="(fire, index) in fires" :key="index">
  {{index}}.{{getCoords(index)}}
</div>


getCoords(index) {
    return [this.fires[index].lat, this.fires[index].lon]  
}