How to make a destructuring of this array of objects

Question

I'm trying to use destructuring on elements of my subItems array to get variables that refer directly to the links and open properties.
Specifically, I'm trying to use the following code, which fails as specified in the comments.

const [{links, open}] = subItems.map(({ items }) => {
  document.getElementById(items);
}); // Fails: returns nothing  

const {links, open} = subItems((items ) => {
  return items; 
}); // Fails: returns only the first `link` and `open`
      
// This is what the `subItems` array looks like:
export const subItems = [
  {
    links: [
      { title: 'ret', to: '#' },
      { title: 'def', to: '#' },
      { title: 'rev', to: '#' },
      { title: 'red', to: '#' },
      { title: 'im', to: '#' },
      { title: 'glossar', to: '#' }
    ],
    open: true
  },
  {
    links: [
      { title: 'recloud', to: '#' },
      { title: 'broker', to: '#' },
      { title: 'mercury', to: '#' },
      { title: 'investor', to: '#' }
    ],
    open: false
  }
];

P.S. I'm new to JS, sorry if I'm misunderstanding something trivial.

Which links and open do you want? There are two, one set at index 0 and another set at index 1. Or do you want an array of just those? Or...? — T.J. Crowder
– T.J. Crowder, Commented Feb 19, 2021 at 9:20
Are you trying to get all the link properties to one varaible? Something like this: Destructure object properties inside array for all elements and How to destructure an array of objects? — adiga
– adiga, Commented Feb 19, 2021 at 9:21
You need to be more clearer on the output. Please check if this helps you: subItems.map(({link, open})=>{ }) — Diwakar Singh
– Diwakar Singh, Commented Feb 19, 2021 at 9:38
Stack Overflow is a very active place. When you post a question (or answer!), please stick around for a few minutes so you can respond to anything that comes up in the comments. — T.J. Crowder
– T.J. Crowder, Commented Feb 19, 2021 at 9:47

Cat · Accepted Answer · 2021-02-19 10:14:04Z

Does this accomplish what you're trying to do?:

// Gets array (but you can get it any way you want, maybe by `import`)
const subItems = getSubItems();

// Loops through array (using `subItem` as the name for each array element)
for(subItem of subItems){

  // Destructures the current element in array (using `{...}` for objects)
  const {links, open} = subItem;

  // Collects links info (This is not needed -- just makes nicer printing)
  const linkString = links.reduce(
    (linkStr, link) => linkStr + `title:${link.title}, to:${link.to}; `,
    ""
  );

  // Does something with links and open (We could print `links` instead of linkString)
  console.log("links: ", linkString, "\nopen: ", open, "\n\n");
}
      
function getSubItems(){
  return [
    {
      links: [
        { title: 'ret', to: '#' },
        { title: 'def', to: '#' },
        { title: 'rev', to: '#' },
        { title: 'red', to: '#' },
        { title: 'im', to: '#' },
        { title: 'glossar', to: '#' }
      ],
      open: true
    },
    {
      links: [
        { title: 'recloud', to: '#' },
        { title: 'broker', to: '#' },
        { title: 'mercury', to: '#' },
        { title: 'investor', to: '#' }
      ],
      open: false
    }
  ];
}

Collectives™ on Stack Overflow

How to make a destructuring of this array of objects

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related