How to destructure es6 javascript nested objects

Question

I want to structure object in es6 but not getting results.

let animal ={
      data:{
          typee:{
              title: "Cow",
              legs:4
          }
      }
} 

let {data:{typee:{title,legs}}}=animal;

now console.log(data) giving output Error: data is not defined. What I am doing wrong ?

It's not clear what variables you want to end up with. Do you want title and legs, data and typee, or all four? — T.J. Crowder
– T.J. Crowder, Commented Nov 28, 2019 at 11:41

Ori Drori · Accepted Answer · 2019-11-28 11:41:19Z

5

When destructuring nested objects, the interim values are not assigned to consts/variables. You'll have to assign them explictly:

const animal = {"data":{"typee":{"title":"Cow","legs":4}}};

const {
  data, // assign the data
  data: {
    typee, // assign the typee
    typee: {
      title,
      legs
    }
  }
} = animal;

console.log(data, typee, title, legs);

edited Nov 28, 2019 at 11:41

answered Nov 28, 2019 at 11:31

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

2 Comments

T.J. Crowder Over a year ago

@ Ashwani - You only need the data, and typee, parts of that if you want those variables (as suggested by your console.log(data) statement). If you just want title and legs, just leave data, and typee, out.

T.J. Crowder Over a year ago

Heh, I actually meant the opposite. :-) If they only want title and legs, they can just use {data: {typee: {title, legs } } }. I was basically thinking it was the console.log that was wrong in the question, they did it just for debugging or something, rather than the destructuring. Anyway, good answer, tells them what was going on and, if they want data and typee, how to get them.

Patrick Evans · Accepted Answer · 2019-11-28 11:39:21Z

0

let {data:{typee:{title,legs}}}=animal;

Creates title and legs not data. If you want to get one of the other encapsulating properties as well you have to specify it separately:

//creates data along with title and legs
let {data, data:{typee:{title,legs}}}=animal;
console.log(data,title,legs);

answered Nov 28, 2019 at 11:39

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

Collectives™ on Stack Overflow

How to destructure es6 javascript nested objects

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related