Destructuring nested objects in an array

Question

I basically want to pull out the first object within an array and get it's name. The only challenge here is that I'm trying to destructure this within a parent object:

const exampleObject = {
  collection: [{
    name: "First Object",
  }, {
    name: "Second Object",
  }],
};

const {
  collection: [firstObject: {
    name
  }]
} = exampleObject;

console.log(firstObject);

Is sort of thing possible?

Here is a good read-up on ES6: Destructuring — an elegant way of extracting data from arrays and objects in JavaScript — Mr. Polywhirl
– Mr. Polywhirl, Commented Oct 7, 2019 at 17:10

Mr. Polywhirl · Accepted Answer · 2019-10-07 16:56:02Z

6

You need to switch it to:

{name: firstObject}
  |        |________ New variable name
  |    
  |_________________ Property name

const exampleObject = {collection: [{name: "First Object",}, {name: "Second Object",}],}

const { collection: [{ name: firstObject }] } = exampleObject

console.log(firstObject)

edited Oct 7, 2019 at 16:56

Mr. Polywhirl

49.1k12 gold badges96 silver badges147 bronze badges

answered Oct 7, 2019 at 16:45

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

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

9 Comments

Carl Edwards Over a year ago

Oh okay so originally I was thinking I was extracting the array object by giving it the name of firstObject. Little did I know all I needed to do was something like this: [ { name }]. Correct?

Code Maniac Over a year ago

@CarlEdwards if you don't want to rename it [{name}] is enoguh

T.J. Crowder Over a year ago

@ Carl - Both of these are possible because destructuring syntax mirrors object and array literal syntax. In object literal syntax, {name: x} creates a property called name and gives it the value it gets from x. In destructuring syntax, {name: x} takes the value from name and puts it in x. That is, the things that are sources of values in literal syntax are targets of values in destructuring syntax. Onc eyou know that, since you're already familiar with literal syntax, destructuring becomes...well, I won't lie, it doesn't become second nature. But it gets easier.

Carl Edwards Over a year ago

Perfect. Thanks. Will accept this answer in a few. Maybe my memory is failing me but I thought that those above a certain karma count could accept immediately. Maybe it's something new. _(ツ)_/¯

T.J. Crowder Over a year ago

@CarlEdwards - I think the delay applies to everyone. 15 minutes isn't long. :-)

|

f278f1b2 · Accepted Answer · 2019-10-07 16:47:28Z

1

If you need the name of first object you should write

const {
  collection: [{ name }]
} = exampleObject;

console.log(name);

answered Oct 7, 2019 at 16:47

f278f1b2

3111 silver badge7 bronze badges

Collectives™ on Stack Overflow

Destructuring nested objects in an array

2 Answers 2

9 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related