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

The question is not clear enough, could you clarify this a bit more? "Trying to loop over the array and access data but without the console.log" — Ryan Le, Aug 10 '21 at 14:30
What is the exact outcome you are expecting given this data? — sebtheiler, Aug 10 '21 at 14:32
Does this answer your question? [For-each over an array in JavaScript](https://stackoverflow.com/questions/9329446/for-each-over-an-array-in-javascript) — Erik, Aug 10 '21 at 14:39

score 2 · Answer 1 · answered Aug 10 '21 at 14:41

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"
.... 
*/

anirudh_techie · Answer 2 · 2022-12-11T11:28:17.477

1

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..

edited Dec 11 '22 at 11:28

answered Aug 10 '21 at 14:34

anirudh_techie

11
3

score 0 · Answer 3 · answered Aug 10 '21 at 14:33

0

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

answered Aug 10 '21 at 14:33

RABI

692
2
15

score 0 · Answer 4 · answered Aug 10 '21 at 14:34

0

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.

answered Aug 10 '21 at 14:34

Erik

1,246
13
31

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

4 Answers4