take a array value from and array object with destructuring javascript

Question

I have an array of objects below:

const obj = [
 0:{
  "content": {
    "tabs": [
      {
        "name": "Overview",
        "id": 1,      
        "sections":[           
          {"event_description":"Event Description"},
          {"photos":"Photos"},
          {"reference_documents":"Reference Documents"},
          {"discussion":"Discussion"}

        ]
      },{...},{..}
     ]
   }
 },
 1:{}
]

How can I take just the sections array from obj with destructuring? I've tried these things:

const [{content={}}] = obj;
const [{content{tabs={}}]=obj;
const [{content{tabs[0]{sections}}}]=obj;

And also sections should be changed to another variable name.

Prince Hernandez · Accepted Answer · 2020-01-29 14:22:31Z

3

basically you are really close, here you have a working example, and also adding default values just in case :)

const obj = {
  content: {
    tabs: [{
      name: "Overview",
      id: 1,
      sections: [{
        event_description: "Event Description"
      }, {
        photos: "Photos"
      }, {
        reference_documents: "Reference Documents"
      }, {
        discussion: "Discussion"
      }]
    }]
  }
};

const { content: { tabs: { 0: { sections = [] } = {} } = {} } = {} } = obj;

console.log(sections);

answered Jan 29, 2020 at 14:22

Prince Hernandez

3,7411 gold badge13 silver badges20 bronze badges

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

1 Comment

Hamid Shoja Over a year ago

const [ { content: { tabs: { 0: { sections:foo = [] } = {} } = {} } = {} } ] = obj; worked for me.

Nina Scholz · Accepted Answer · 2020-01-29 14:34:05Z

2

You could destructure the object with a proper index as key and take a computed property name.

If necessary add some default values.

const
    obj = [{ content: { tabs: [{ name: "Overview", id: 1, sections: [{ event_description: "Event Description" }, { photos: "Photos" }, { reference_documents: "Reference Documents" }, { discussion: "Discussion" }] }] } }],
    key = 'sections',
    { 0: { content: { tabs: { 0: { [key]: value } } } } }= obj;

console.log(value);

edited Jan 29, 2020 at 14:34

answered Jan 29, 2020 at 14:14

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

2 Comments

Hamid Shoja Over a year ago

example changed a little

Hamid Shoja Over a year ago

const [ { content: { tabs: { 0: { sections:foo = [] } = {} } = {} } = {} } ] = obj; worked for me.

Zohaib Ijaz · Accepted Answer · 2020-01-29 14:20:07Z

0

Do this

const obj ={
  "content": {
    "tabs": [
      {
        "name": "Overview",
        "id": 1,      
        "sections":[           
          {"event_description":"Event Description"},
          {"photos":"Photos"},
          {"reference_documents":"Reference Documents"},
          {"discussion":"Discussion"}

        ]
      }
     ]
   }
};

const { content: { tabs } } = obj;

const sections = tabs.map(tab => tab.sections)

console.log(sections)

answered Jan 29, 2020 at 14:20

Zohaib Ijaz

23k7 gold badges43 silver badges63 bronze badges

Comments

harisu · Accepted Answer · 2020-01-29 14:42:56Z

0

You can do that by going in one at a time or using the keys to destruture.

const obj ={
  "content": {
    "tabs": [
      {
        "name": "Overview",
        "id": 1,      
        "sections":[           
          {"event_description":"Event Description"},
          {"photos":"Photos"},
          {"reference_documents":"Reference Documents"},
          {"discussion":"Discussion"}

        ]
      },
     ]


  }
}
//do the following
const {content} = obj;
const {tabs} = obj["content"} //or const {tabs} = content

similarly all throughout.

answered Jan 29, 2020 at 14:42

harisu

1,44410 silver badges18 bronze badges

Comments

Nick Parsons · Accepted Answer · 2020-01-29 15:16:49Z

0

You can destructure down to the tabs array using [], and take the first object's section property from that array like so:

const obj = [{ "content": { "tabs": [{ "name": "Overview", "id": 1, "sections": [{ "event_description": "Event Description" }, { "photos": "Photos" }, { "reference_documents": "Reference Documents" }, { "discussion": "Discussion" } ] }] } }];

const [{content: {tabs: [{sections: foo}]}}] = obj;
console.log(foo); // here `foo` refers to sections

.as-console-wrapper { max-height: 100% !important;} /* ignore */

Destructuring syntax mimics the object literal syntax and so, it might be easier to understand when formatted. Here is a side-by-side comparison of the destructuring syntax and the array of objects you have:

// Desctructuing:       Actual object/array:
const [{                // [{
  content: {            //   "content": {             
    tabs: [{            //     "tabs": [{
      sections: foo     //       "name": "Overview", "id": 1, "sections": {...}
    }]                  //     }, ...]
  }                     //   }
}] = obj;               // }, ...]

edited Jan 29, 2020 at 15:16

answered Jan 29, 2020 at 14:19

Nick Parsons

51.7k6 gold badges61 silver badges80 bronze badges

1 Comment

Hamid Shoja Over a year ago

sorry, example changed a little

Collectives™ on Stack Overflow

take a array value from and array object with destructuring javascript

5 Answers 5

1 Comment

2 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related