how to map through a property inside an array of arrays of objects - reactjs

Question

how can I map through a property inside an array of arrays of objects?

to clarify my point here is my code structure, outer array that contains 4 inner arrays - the number shouldn't be four - each inner array has a property title which I want to pick. I want to pick all the tiltle properties inside inner array and get it back in a separate array

Array(4)
0: Array(1)
0: {_id: 'Mc-mi_000000001', title: 'McRoyale', section: {…}, imageSrc: 'McRoyal.png', price: 70, …}
length: 1
[[Prototype]]: Array(0)
1: Array(2)
0: {_id: 'Mc-mi_000000002', title: 'Big Mac', section: {…}, imageSrc: 'Bigmac.png', price: 55, …}
1: {_id: 'Mc-mi_000000003', title: 'Big Tasty', section: {…}, imageSrc: 'Big-tasty-Beef.png', price: 75, …}
length: 2
[[Prototype]]: Array(0)
2: Array(3)
0: {_id: 'Mc-mi_000000022', title: 'McNuggets 6 Pieces', section: {…}, imageSrc: 'McNuggets-6psc.png', price: 50, …}
1: {_id: 'Mc-mi_000000030', title: 'McFries', section: {…}, imageSrc: 'Large-Frise.png', price: 30, …}
2: {_id: 'Mc-mi_000000039', title: 'American Coffee', section: {…}, imageSrc: 'Ame-R-700x474.png', price: 25, …}
length: 3
[[Prototype]]: Array(0)
3: Array(1)
0: {_id: 'Mc-mi_000000041', title: 'Happy Meal Cheeseburger', section: {…}, imageSrc: 'HM-D-Chesseburger.png', price: 35, …}
length: 1
[[Prototype]]: Array(0)
length: 4
[[Prototype]]: Array(0)

how can I put the title property in each inner array into a separate array?

It would be better to have it in valid JavaScript syntax. All those {...} are leaving doubt on what you have there. — trincot
– trincot, Commented Jun 10, 2022 at 21:08

Niklas · Accepted Answer · 2022-06-10 21:26:28Z

1

If you want to keep the nested array structure you can use a map function on the inner arrays inside the map function of the outer/main array.

const data = [
  [
    {_id: 'Mc-mi_000000001', title: 'McRoyale'}
  ], [
    {_id: 'Mc-mi_000000002', title: 'Big Mac'},
    {_id: 'Mc-mi_000000003', title: 'Big Tasty'}
  ], [
    {_id: 'Mc-mi_000000022', title: 'McNuggets 6 Pieces'},
    {_id: 'Mc-mi_000000030', title: 'McFries'},
    {_id: 'Mc-mi_000000039', title: 'American Coffee'}
   ]
];

const titleData = data.map(innerArray => innerArray.map(({title}) => title));

console.log(titleData);

/*Expected results:
  [
    [
      "McRoyale"
    ],
    [
      "Big Mac",
      "Big Tasty"
    ],
    [
      "McNuggets 6 Pieces",
      "McFries",
      "American Coffee"
    ]
  ]
*/

edited Jun 10, 2022 at 21:26

answered Jun 10, 2022 at 21:19

Niklas

1,9584 gold badges16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Niklas Over a year ago

You can also use something like entry => entry.title instead of ({title}) => title if you feeling more comfortable with that syntax.

trincot · Accepted Answer · 2022-06-10 21:20:40Z

1

You can collect those titles by calling .map nested:

const data = [[{_id: 'Mc-mi_000000001', title: 'McRoyale' }], [{_id: 'Mc-mi_000000002', title: 'Big Mac'},{_id: 'Mc-mi_000000003', title: 'Big Tasty'}], [{_id: 'Mc-mi_000000022', title: 'McNuggets 6 Pieces' },{_id: 'Mc-mi_000000030', title: 'McFries' },{_id: 'Mc-mi_000000039', title: 'American Coffee'}], [{_id: 'Mc-mi_000000041', title: 'Happy Meal Cheeseburger' }]];

const titles = data.map(arr => arr.map(({title}) => title));
console.log(titles);

edited Jun 10, 2022 at 21:20

answered Jun 10, 2022 at 21:15

trincot

357k38 gold badges282 silver badges338 bronze badges

Comments

bgeffrault · Accepted Answer · 2022-06-10 21:11:03Z

0

One possibility is first to flatten your arrays into one then go through it with a map:

[[{title: "a"}, {title: "b"}], [{title: "c"}]].reduce((acc, arr) => ([...acc, ...arr]), []).map(obj => obj.title)

answered Jun 10, 2022 at 21:11

bgeffrault

1581 silver badge5 bronze badges

3 Comments

yasser Eltibili Over a year ago

yes, but this will return all the titles together, I need to return the titles of each inner array in a separate array.

bgeffrault Over a year ago

Can you add the final solution you wish for please ?

bgeffrault Over a year ago

Ok someone found the correct way to do :D

Collectives™ on Stack Overflow

how to map through a property inside an array of arrays of objects - reactjs

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related