How to dynamically render/load my array with two values?

Question

I'm a beginner in Java Script and ReactJS and I'm doing a project to improve my knowledge.

I will render some polygonal points on the map, I am using the google-maps-react library.

I have a problem regarding polygons, to be able to plot on the map I must send the data in this way:

const coords = {
  coords: [
    [
      { lat: 25.774, lng: -80.19 },
      { lat: 18.466, lng: -66.118 },
      { lat: 32.321, lng: -64.757 },
      { lat: 25.774, lng: -80.19 },
    ],
    [
      { lat: 25.774, lng: -60.19 },
      { lat: 18.466, lng: -46.118 },
      { lat: 32.321, lng: -44.757 },
      { lat: 25.774, lng: -60.19 },
    ],
  ],
};

The problem is that the coordinates that I have are in a different format. They are in this format:

[
  [
    [-47.7027099655629, -22.26485424139211],
    [-47.70271526762656, -22.26487408404245],
    [-47.70272860122938, -22.26486817968162],
    [-47.70275769033151, -22.26485486960603],
    [-47.7027803963492, -22.26483968832534],
    [-47.7027099655629, -22.26485424139211]
  ]
], [
  [
    [-47.70336262481528, -22.26561084941619],
    [-47.70336542334331, -22.26561213882109],
    [-47.70336596593334, -22.26561211173161],
    [-47.7033695288571, -22.2656092720629],
    [-47.70337969579747, -22.26560034650085],
    [-47.70336262481528, -22.26561084941619]
  ]
]

As you can see, they are objects of different types, they know how to tell me if there is any javascript function where I can leave my array of coordinates in the same way as the model of the library google-maps-react?

I would like my array to look like this:

const coords = {
  coords: [
    [
      { lat: -47.7027099655629, lng: -22.26485424139211 },
      { lat: -47.70271526762656, lng: -22.26487408404245 },
      { lat: -47.70275769033151, lng: -22.26485486960603 },
      { lat: -47.7027803963492, lng: -22.26483968832534 },
      { lat: -47.7027099655629, lng: -22.26485424139211 },
    ],
    [
      { lat: -47.70336262481528, lng: -22.26561084941619 },
      { lat: -47.70336542334331, lng: -22.26561213882109 },
      { lat: -47.70336596593334, lng: -22.26561211173161 },
      { lat: -47.70337969579747, lng: -22.26560034650085 },
      { lat: -47.70336262481528, lng: -22.26561084941619 },
    ],
  ],
};

There is no way for me to change this data one by one, the original file with my coordinates has almost eight thousand lines, so I need a function that does this automatically.

Here's my original data I trying to use: https://gist.githubusercontent.com/bernalvinicius/6213d045e6f1c360008489bb416e58b5/raw/b8b997bb7e8d640a41a76ae0214663499fe1d8e5/coordinates.json

Thank you!!

Answer 1

Assuming it's an array of arrays, you can use the function reduce along with the function map to be able to build the desired output.

let arr = [  [    [      [-47.7027099655629, -22.26485424139211],      [-47.70271526762656, -22.26487408404245],      [-47.70272860122938, -22.26486817968162],      [-47.70275769033151, -22.26485486960603],      [-47.7027803963492, -22.26483968832534],      [-47.7027099655629, -22.26485424139211]    ]  ], [    [      [-47.70336262481528, -22.26561084941619],      [-47.70336542334331, -22.26561213882109],      [-47.70336596593334, -22.26561211173161],      [-47.7033695288571, -22.2656092720629],      [-47.70337969579747, -22.26560034650085],      [-47.70336262481528, -22.26561084941619]    ]  ]];
let coords = {
  coords: arr.reduce((a, [c]) => a.concat([c.map(([lat, lng]) => ({lat, lng}))]), [])
};

console.log(coords);

.as-console-wrapper { max-height: 100% !important; top: 0; }