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_](https://www.deadcoderising.com/2017-03-28-es6-destructuring-an-elegant-way-of-extracting-data-from-arrays-and-objects-in-javascript/) — Mr. Polywhirl, Oct 07 '19 at 17:10

score 6 · Accepted Answer · edited Oct 07 '19 at 16:56

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 07 '19 at 16:56

Mr. Polywhirl

42,981
12
84
132

answered Oct 07 '19 at 16:45

Code Maniac

37,143
5
39
60

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? – Carl Edwards Oct 07 '19 at 16:48
1

@CarlEdwards if you don't want to rename it `[{name}]` is enoguh – Code Maniac Oct 07 '19 at 16:49
1

@ 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. – T.J. Crowder Oct 07 '19 at 16:50
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. \_(ツ)_/¯ – Carl Edwards Oct 07 '19 at 16:50
@CarlEdwards - I think the delay applies to everyone. 15 minutes isn't long. :-) – T.J. Crowder Oct 07 '19 at 16:51
@T.J.Crowder Thanks for the explanation. It's been a while since I've *asked* something here so you're probably right. – Carl Edwards Oct 07 '19 at 16:52
@CarlEdwards along with the explanation provide by T.J you can read out [`this question`](https://stackoverflow.com/questions/55194118/how-do-i-parse-a-string-to-number-while-destructuring) which will give you a insight what happens under the hood when we destructure – Code Maniac Oct 07 '19 at 16:54
@CodeManiac Awesome! Thanks again! – Carl Edwards Oct 07 '19 at 16:55
@CarlEdwards keep in mind that if you would like to get the `name` of the second object also, you must rename the `name` property for each one of the objects that you pull out. – zb22 Oct 07 '19 at 18:00

score 1 · Answer 2 · answered Oct 07 '19 at 16:47

1

If you need the name of first object you should write

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

console.log(name);

answered Oct 07 '19 at 16:47

f278f1b2

301
1
7

Destructuring nested objects in an array

2 Answers2