Returned data object is undefined

Question

I'm using MapBox to plot multiple coordinates onto a map, and for some reason the longitude and latitude that I'm trying to return in my return object are coming up as undefined. Am I missing some kind of config to bring the data into the object?

I've done this before and it worked fine.

Data ("index") photo

Code -

    targetLocations() {
      const data = []
      const timer = setInterval(() => {
        for (let i = 0; i < store.state.location.locations.length; i++) {
          this.coordinates = [store.state.location.locations[i]]
          data.push(this.coordinates)
        }
        this.map.getSource('data-source').setData({
          "type": "FeatureCollection",
          "features": data.map(this.targetElements)
        });
      }, 1000);
    },
    targetElements(index) { // index returns the totals I expect
      console.log(index)
      const { longitude, latitude, userName, dateTimeStored } = index;
      return {
        "type": "Feature",
        "properties": {
          'description': "PID: " + userName + "<br />" + "Lng/Lat: " + index[0] + " / " + index[1] + "<br />" + "Captured At: " + dateTimeStored,
          'name': userName,
          'capturedAt': dateTimeStored,
        },
        "geometry": {
          "type": "Point",
          "coordinates": [longitude, latitude]
        }
      };
    },

Answer 1

You're pushing coordinates = [...], so each element in data is an array. data is a matrix, array of arrays.

You should destruct like const [...] = index, but also you can just use index.location etc.