How to access properties in array of objects in react/javascript For-Loop & ForEach?

Question

Trying to loop over the array and access data but without the console.log

for (let i = 0; i < Locations.length; i++) {
    console.log(Locations[i]);
  }

Data structure of Post for Google Maps: Array --> Obj

[
    {
        "description": "asdlafaslfj",
        "lat": 28.0440005,
        "lng": -82.3992308,
        "title": "tent"
    },
    {
        "description": "asdadf",
        "lat": 28.050104,
        "lng": -82.39597859999999,
        "title": "Blanket"
    },
    {
        "description": "sadfasf",
        "lat": 29.6900252,
        "lng": -82.3733803,
        "title": "Swamp"
    },
    {
        "description": "9808",
        "lat": 29.6900252,
        "lng": -82.3733803,
        "title": "Dorm"
    },
    {
        "description": "ssljkfasf",
        "lat": 29.6900252,
        "lng": -82.3733803,
        "title": "Treehouse"
    },
    {
        "description": "asdlafaslfj",
        "lat": 29.6900252,
        "lng": -82.3733803,
        "title": "tent"
    }
]

Want to store data: Places: Locations --> Places.title

Answer 1

I would go with a map as you want the location to be a key. So output would be something like location { lat, lng } -> title

const res = places.reduce((acc, val) => {
    const location = { lat: val.lat, lng: val.lng};
    acc.set(location, val.title);
    return acc;
}, new Map());

console.log(res);

/* Outp
0: {Object => "tent"}
  key: {lat: 28.0440005, lng: -82.3992308}
  value: "tent"
.... 
*/

Answer 2

this can be achieved by directly accessing the object ie:

for (let i = 0; i < Locations.length; i++) {
    var currentLocation = Locations[i];
    var title = currentlocation.title;
    //this can also be achieved using
    Locations[i].title
}

Thank you for reading <3

edit: code had a mistype, ik its been a long time and there's no point but incase there's someone new who needs help..

Answer 3

I believe you are trying to display list of location title from the array. For that you can use map() function.

{locations?.data?.map((item) => (
        //  console.log(item);

        <div>{item.title}</div>
      ))}

An example here

Answer 4

Assuming you have a variable named Locations you can do this:

Locations.forEach(loc => console.log(loc.description));

and do whatever you need to do in that closure. Left the console log as an example.