如何解构这个对象数组

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

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

Answer 1

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