For loop only shows last value in array-CodePudding

I'm trying to list out a set of values, that only show the new updated values in an array, but unfortunately it is only printing out the last value in the array. How do I show all the values and not only the last one?

When I console.log out the longLat[itemIndex] this is what I see. They should be in the same array

Collapsed:

Expanded:

My code -

let longLat = []

for (let index of this.overwatchTargets) {
  let coordsArr = [index["longitude"], index["latitude"], index["userName"], index["dateTimeCaptured"]]
  longLat.push(coordsArr)

  for (let itemIndex in longLat) {
    // Update location coords
    this.map.getSource('data-source').setData({
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "properties": {
          'description': "Dispatcher: "   longLat[itemIndex][2]   "\n"   "\Lng/Lat\:"   longLat[itemIndex][0]   " / "   longLat[itemIndex][1]   "\n"   "\StartTime\: "   longLat[itemIndex][3]
        },
        "geometry": {
          "type": "Point",
          "coordinates": longLat[itemIndex] <--- This should show all elements in the array, but only shows the last one
        }
      }]
    });
  }
}

CodePudding user response：

You are passing a single-element array several times instead of passing a single collection of coordinates.

Try creating a method of

indexToFeature(index) {
  const {longitude, latitude, userName, dateTimeCaptured} = index;
  return {
    "type": "Feature",
    "properties": {
      'description': "Dispatcher: "   userName   "\n"   "\Lng/Lat\:"   longitude   " / "   latitude   "\n"   "\StartTime\: "   dateTimeCaptured
    },
    "geometry": {
      "type": "Point",
      "coordinates": [longitude, latitude, userName, dateTimeCaptured]
    }
  };
}

Then your main body can simply be

this.map.getSource('data-source').setData({
    "type": "FeatureCollection",
    "features": this.overwatchTargets.map(indexToFeature)
});

to call setData once, converting the entire array of overwatchTargets into an array of features.

CodePudding user response：

I think separating these two for loops will help

let longLat = []

for (let index of this.overwatchTargets) {
  let coordsArr = [index["longitude"], index["latitude"], index["userName"], index["dateTimeCaptured"]]
  longLat.push(coordsArr)
}
  for (let itemIndex in longLat) {
    // Update location coords
    this.map.getSource('data-source').setData({
      "type": "FeatureCollection",
      "features": [{
        "type": "Feature",
        "properties": {
          'description': "Dispatcher: "   longLat[itemIndex][2]   "\n"   "\Lng/Lat\:"   longLat[itemIndex][0]   " / "   longLat[itemIndex][1]   "\n"   "\StartTime\: "   longLat[itemIndex][3]
        },
        "geometry": {
          "type": "Point",
          "coordinates": longLat[itemIndex]
        }
      }]
    });
  }