How to use forEach and push function to update an array of object in Javascript?

Question

I have been playing a lot with react native lately an now I am trying to draw a polygon on map with a lot of coordinates.

My JSON (something like this)

{ 
    "routeGeoJSON":
    {
        "features":
        [
            "geometry":
            {
                "coordinates": [
                    [
                        [ 122, 12 ], [ 211, 19 ], ... //[ lon, lat ]
                    ]
                ]
            }
        ]
    }
}

Now I want to push the value of coordinates to a new array.

My code so far

//import function

class RouteScreen extends Component {
    constructor(props) {
        super(props);

        let polygon = [];

        let routePolygon = this.props.routes.data.routeGeoJSON.features[0].geometry.coordinates[0];

        let obj = {};
        obj.latitude = routePolygon.forEach((element) => {
            polygon.push(element[1]);
        });
        obj.longitude = routePolygon.forEach((element) => {
            polygon.push(element[0]);
        });

        this.state = { polygon };

render() {
    const { polygon } = this.state;
    return (
        <View style={styles.container}>
            <MapView 
                provider={this.props.provider}
                style={styles.map}
                zoomEnabled
                initialRegion={{
                    latitude: this.props.routes.data.routeGeoJSON.features[0].geometry.coordinates[0][0][1],
                    longitude: this.props.routes.data.routeGeoJSON.features[0].geometry.coordinates[0][0][0],
                    latitudeDelta: 0.0922,
                    longitudeDelta: 0.0421,
                }}
            >
                <MapView.Polygon
                    coordinates={polygon}
                    fillColor="rgba(0, 200, 0, 0.5)"
                    strokeColor="rgba(0,0,0,0.5)"
                    strokeWidth={2}
                />

            // some code
            </MapView>
            // some code...

I want to fetch the coordinates from the JSON and push it to the polygon array so it will dynamically become like this

polygon: [
            {
                latitude: 12,
                longitude: 122
            },
            {....}, {...}....
          ]

But this resulting in error while updating property 'coordinates' of a view managed by: AIRMapPolygon null expected Map, got a double

What did I missed here? Is this the correct way to use forEach with push?

Thank you for your help and suggestion.

it gave me typeerror: undefined is not a function(evaluating 'routePolygon.foreach(function(element){ polygon.push(element[1])}) — Fang
– Fang, Commented Nov 21, 2017 at 3:34
the value of routePolygon is not present. It's undefined. Where r u getting it's value. is it async process? — Manish
– Manish, Commented Nov 21, 2017 at 3:40
If you're iterating over the first element of coordinates array which is an array too if you do element[1] it will return undefined. I think that's the problem. — Rubén S. García
– Rubén S. García, Commented Nov 21, 2017 at 3:44

Christian Santos · Accepted Answer · 2017-11-21 03:49:37Z

2

Your syntax for appending objects to polygon is incorrect. What you want to do is iterate over every value in routePolygon and push a new object with two fields (latitude and longitude) into your polygon like so:

routePolygon.forEach((element) => {

    polygon.push({

        latitude: element[1],
        longitude: element[0]
    });
});

With this in mind, you don't need to create the obj variable that you currently have in your code. Instead, you create new objects inside of the forEach using the Object Literal syntax ({}) when you push these new objects into polygon.

Edit: I'll provide an example to show you what I mean. Run the snippet below:

let routePolygon = [ [10, 20], [30, 40], [50, 60] ];

let polygon = [];

routePolygon.forEach((element) => {

    polygon.push({

        latitude: element[1],
        longitude: element[0]
    });
});

console.log(polygon);

edited Nov 21, 2017 at 3:49

answered Nov 21, 2017 at 3:42

Christian Santos

5,4551 gold badge20 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fang Over a year ago

I did not know that I can create obj variable directly inside forEach. Thank you for your answer. This helps me solve this problem.

Alex Kudryashev · Accepted Answer · 2017-11-21 03:53:41Z

1

It looks like the initial JSON has SintaxError

{ 
    "routeGeoJSON":
    {
        "features":
        [
            //{ //expected
            "geometry":
            {
                "coordinates": [
                    [
                        [ 122, 12 ], [ 211, 19 ], ... //[ lon, lat ]
                    ]
                ]
            }
          //} //closing 
        ]
    }
}

After fixing syntax you can use .map function. Something like this.

let data = {
  "routeGeoJSON": {
    "features": [{
      "geometry": {
        "coordinates": [
          [
            [122, 12],
            [211, 19] //, ... //[ lon, lat ]
          ]
        ]
      }
    }]
  }
};
let poligon = data.routeGeoJSON.features[0].geometry.coordinates[0]
  .map(el => {
    return {
      longitude: el[0],
      latitude: el[1]
    };
  });
  console.log(poligon);

answered Nov 21, 2017 at 3:53

Alex Kudryashev

9,5103 gold badges31 silver badges39 bronze badges

1 Comment

Fang Over a year ago

Thank you for that. It must be my mistake when typing the question. Nevertheless, your solution with map might be useful to me in future.

Thái Nguyễn Hoài Thiên · Accepted Answer · 2017-11-21 03:45:58Z

0

Looking forward to what I know will help you

var MyJSON = ;//You JSON
var result = [];
MyJSON.routeGeoJSON.features[0].geometry.coordinates[0][0].forEach(function(item, index){
  var obj = {
    latitude: item[0],
    longitude: item[1]
  };
  result.push(obj);
})
//This you can this result;

answered Nov 21, 2017 at 3:45

Thái Nguyễn Hoài Thiên

234 bronze badges

1 Comment

ton Over a year ago

It would help to explain your solution :)

Collectives™ on Stack Overflow

How to use forEach and push function to update an array of object in Javascript?

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related