Destructuring of an array of objects getting undefined

Question

I have tried to destructure the Array object, getting undefined.

 var menus = [{
   food: "pizza",
   drink: "coke"
 }, {
   food: "burger",
   drink: "pepsi"
 }, {
   food: "sandwitch",
   drink: "coke"
 }, {
   food: "popcorn",
   drink: "coke"
 }];

 var {
   food: team,
   drink: sports
 } = menus;

 console.log({
   team
 });

Output: team is undefined.

It seems like a syntax issue.

Ori Drori · Accepted Answer · 2018-09-01 13:59:07Z

1

You need to destructure an object inside the array.

You can use array destructuring with object destructuring (the 1st item in this case):

const menus = [{"food":"pizza","drink":"coke"},{"food":"burger","drink":"pepsi"},{"food":"sandwitch","drink":"coke"},{"food":"popcorn","drink":"coke"}];
 
const [{ food:team,drink:sports }] = menus;
 
console.log({team});

Or destructure a specific object in the array:

const menus = [{"food":"pizza","drink":"coke"},{"food":"burger","drink":"pepsi"},{"food":"sandwitch","drink":"coke"},{"food":"popcorn","drink":"coke"}];
 
const { food:team,drink:sports } = menus[2];
 
console.log({team});

To get all values to a new array use Array.map():

const menus = [{"food":"pizza","drink":"coke"},{"food":"burger","drink":"pepsi"},{"food":"sandwitch","drink":"coke"},{"food":"popcorn","drink":"coke"}];
 
const teams = menus.map(({ food: team }) => ({ team }));
 
console.log(teams);

edited Sep 1, 2018 at 13:59

answered Sep 1, 2018 at 13:53

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

2 Comments

Mohamed Sahir Over a year ago

After destructuring , i have get a first value alone , how can get all the values of food and push into new array

Mohamed Sahir Over a year ago

thank you for the valuable answer i have learned destructuing from you..

Collectives™ on Stack Overflow

Destructuring of an array of objects getting undefined

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related