Nested Destructuring on Object Assignments

Question

With ES6 destructuring, is their any way to destructure nested objects on assignment?

Here is a quick code example to show what I mean:

let node = {
  ItemTitle: 'Title',
  ItemId: 5,
  Menu: {Item: [{ItemId: 579}]
}

 // my attempts
  let {
      ItemId: id,
      ItemTitle: title, 
      Menu['Item']: subItems
    } = node

  let {
      ItemId: id,
      ItemTitle: title, 
      Menu.Item: subItems
    } = node

nem035 · Accepted Answer · 2016-11-04 18:20:31Z

2

You can just repeat the same syntax for nested levels as with destructuring the top level:

EDIT based on your comment

I need the object within the array

let node = {
  ItemTitle: 'Title',
  ItemId: 5,
  Menu: {Item: [{ItemId: 579}]}
}

let {
  ItemId: id,       // extract `node.ItemId` into a variable called `id`
  ItemTitle: title, // extract `node.ItemTitle` into a variable called `title`
  Menu: {
    Item: [obj]     // extract `node.Menu.Item[0]` into a variable called obj
  }
} = node;

console.log('id =', id);
console.log('title =', title);
console.log('obj =', obj);

Pre-edit: Extracting the id of the object within the nested array.

let node = {
  ItemTitle: 'Title',
  ItemId: 5,
  Menu: {Item: [{ItemId: 579}]}
}

let {
  ItemId: id,           // extract `node.ItemId` into a variable called `id`
  ItemTitle: title,     // extract `node.ItemTitle` into a variable called `title`
  Menu: {
    Item: [{ 
      ItemId: subItemId // extract `node.Menu.Item[0].ItemId` into a variable called `subItemId`
    }]  
  }
} = node;

console.log('id =', id);
console.log('title =', title);
console.log('subItemId =', subItemId);

edited Nov 4, 2016 at 18:20

answered Nov 4, 2016 at 18:05

nem035

35.5k6 gold badges93 silver badges104 bronze badges

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

5 Comments

rm-rf Over a year ago

Thanks for the answer, I understand better now. If you check my example though, node.Menu.Item is an array. How do I destructure an array property of an object?

nem035 Over a year ago

What part of the array do you need, the object within the array or the ItemId property of that object?

rm-rf Over a year ago

Thank you, I need the object within the array.

rm-rf Over a year ago

Excellent, thank you very much for making this so clear to me.

nem035 Over a year ago

@rm-rf no problem amigo, glad to help out :)

TimoStaudinger · Accepted Answer · 2016-11-04 18:08:27Z

2

Yes, you can do nested destructuring with ES6. MDN gives you a nice example.

let node = {
  ItemTitle: 'Title',
  ItemId: 5,
  Menu: {
    Item: [{
      ItemId: 579
    }]
  }
}

let { Menu: { Item: [{ ItemId }] } } = node

console.log(ItemId) // 579

answered Nov 4, 2016 at 18:08

TimoStaudinger

42.7k16 gold badges91 silver badges96 bronze badges

Collectives™ on Stack Overflow

Nested Destructuring on Object Assignments

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related