How do I map over this data in javascript? I am trying to loop over this data for Markers in google maps. Having trouble grabbing the lat and lng.
Data from the console.log array --> array --> object --> lat/lng
LatLng: [
[
{
"lat": 28.0440005,
"lng": -82.3992308
},
{
"lat": 28.050104,
"lng": -82.39597859999999
},
{
"lat": 29.6900252,
"lng": -82.3733803
},
{
"lat": 29.6900252,
"lng": -82.3733803
},
{
"lat": 29.6900252,
"lng": -82.3733803
},
{
"lat": 29.6900252,
"lng": -82.3733803
}
]
]
This is my javascript code for Google Maps. Tried grabbing the lat/lng this way for the marker to loop through the data. Not sure of other methods to include. LatLng is an object of the array, so I could not use a map method at the beginning.
{Object.values(LatLng).map(({ lat, lng }, index) => (
<Marker lat={lat} lng={lng} key={index}>
{console.log(Object.values(LatLng))}
</Marker>
The LatLng array you shared is a 2-d array of objects.
You need to do loop over the first element in that array. Tree-shake and extract the LatLng array first.
const {LatLng} = // Insert your object structure here
{LatLng[0].map(({ lat, lng }, index) => (
<Marker lat={lat} lng={lng} key={index}>
{console.log(Object.values(LatLng))}
</Marker>)))}
{
LatLang && latLang[0].map((item, index) => (
<Marker lat={item[lat]} lng={item[lng]} key={index}>
{console.log(item[lat] , item[lng])}
</Marker>
)}
Try:
{Array.isArray(data[0]) && data[0].map((element, index) => (
<Marker lat={element.lat} lng={element.lng} key={index}>
{console.log(element.lat, element.lng)}
</Marker>
))}