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, Feb 19 '21 at 09:20
Are you trying to get all the `link` properties to one varaible? Something like this: [Destructure object properties inside array for all elements](https://stackoverflow.com/questions/40069301) and [How to destructure an array of objects?](https://stackoverflow.com/questions/66022939) — adiga, Feb 19 '21 at 09:21
You need to be more clearer on the output. Please check if this helps you: `subItems.map(({link, open})=>{ })` — Diwakar Singh, Feb 19 '21 at 09: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, Feb 19 '21 at 09:47

Cat · Accepted Answer · 2021-02-19T10:14:04.720

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
    }
  ];
}

How to make a destructuring of this array of objects

1 Answers1