CODEWITHSUNDEEP
javascriptecmascript-6destructuring
Hamid Shoja
Hamid Shoja

Reputation: 4778

take a array value from and array object with destructuring javascript

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.

Upvotes: 0

Views: 82

Answers (5)

Nick Parsons
Nick Parsons

Reputation: 50749

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;               // }, ...]

Upvotes: 0

harisu
harisu

Reputation: 1416

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.

Upvotes: 0

Nina Scholz
Nina Scholz

Reputation: 386578

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);

Upvotes: 2

Prince Hernandez
Prince Hernandez

Reputation: 3721

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);

Upvotes: 3

Zohaib Ijaz
Zohaib Ijaz

Reputation: 22885

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)

Upvotes: 0

Related Questions