Defining the data in an array

Question

How can I use the data stored in the array cottageGallery from this mapped data?

const galleryData = components.map(g => {
   return {
      cottageGallery: g.cottageGallery,
      destinationGallery: g.destinationGallery,
      activitiesGallery: g.activitiesGallery,
   }
})

I thought it would simply be const cottageGallery = galleryData.cottageGallery but this returns undefined.

What's the purpose of that `map`? To create new objects with only a subset of the properties on the objects in `components`? — T.J. Crowder, Jul 24 '18 at 08:30

Paul Fitzgerald · Accepted Answer · 2018-07-24T08:36:09.347

1

Not quite, galleryData is going to be an array not an object as you are using javascript's map method. If you wanted to get the first item of the array you could do the following - [0] being the first item of the array.

const cottageGallery = galleryData[0].cottageGallery;

To log each cottageGallery you could use forEach and do the following:

galleryData.forEach(item => {
 console.log(item.cottageGallery);
})

edited Jul 24 '18 at 08:36

answered Jul 24 '18 at 08:30

Paul Fitzgerald

11,770
4
42
54

1

Thanks Paul. This works fantastically. I'll accept it in a few minutes as it allows. – Darren Jul 24 '18 at 08:36

score 0 · Answer 2 · answered Jul 24 '18 at 08:29

0

galleryData is an array of the objects returned by the map callback. So you'd use galleryData[index].cottageGallery, where index is in the range 0 through galleryData.length - 1 (or any of the various ways you access entries in an array, such as for-of or forEach or...more here).

answered Jul 24 '18 at 08:29

T.J. Crowder

1,031,962
187
1,923
1,875

Thank you. I've gone with Paul Fitzgeralds answer as it was first seen but I appreciate your help. That link is also very informative. Cheers – Darren Jul 24 '18 at 08:35
@Darren - Totally up to you. Not sure what you mean about "first seen," but this was *posted* first. But the important thing isn't timing, it's which answer you found most helpful. Happy coding! – T.J. Crowder Jul 24 '18 at 08:50

score 0 · Answer 3 · answered Jul 24 '18 at 08:31

0

map Will return an array so you won't be able to simply access galleryData.cottageGallery. You might want to use .reduce() on your array so the outcome can be the object your were trying to create

answered Jul 24 '18 at 08:31

DSCH

2,146
1
18
29

score 0 · Answer 4 · answered Jul 24 '18 at 08:31

0

You can also use forEach to access object array like below:

galleryData.forEach(a => {
 console.log(a.cottageGallery);
})

answered Jul 24 '18 at 08:31

Shahriat Hossain

340
4
12

Defining the data in an array

4 Answers4