javascriptecmascript-6destructuring

How to destructure an array of objects into several arrays, one per property?


I am trying to destructure an array of objects with three properties into three separate arrays for example

maybe something like

const {wlAddresses,wlTokens,wlTickets} = Object.map()

or

const [wlAddresses,wlTokens,wlTickets] = Object.map()

Where Object.map() returns something like this

[{ wlAddresses: '23',
    wlTokens: 1,
    wlTickets: 3 },
  { wlAddresses: '24',
    wlTokens: 1,
    wlTickets: 2 },
  { wlAddresses: '25',
    wlTokens: 1,
    wlTickets: 3 }]

I tried with that method and it only returns the first object, not the ones after. I know I can solve this problem by mapping the object and returning everything as separate arrays but maybe I can use destructuring to do this.

NOTE: Its just a question of can be done or not, I am not forcing an answer


Solution

  • Destructuring is great when you have an object or array and need to pull out specific items, but that's not the case here. Your data is not a simple object or array — it's an array of objects. You're not going to be able to do this with a simple assignment. You will need to transform your data into the format you want. For example something like this:

    let arr = [{
        wlAddresses: '23',
        wlTokens: 1,
        wlTickets: 3
      },
      {
        wlAddresses: '24',
        wlTokens: 1,
        wlTickets: 2
      },
      {
        wlAddresses: '25',
        wlTokens: 1,
        wlTickets: 3
      }
    ]
    
    let r = arr.reduce((acc, curr) => {
        for ([key, value] of Object.entries(curr)) {
            if (! acc[key]) acc[key] = []
            acc[key].push( curr[key])
        }
        return acc
    }, {})
    
    
    const {wlAddresses,wlTokens,wlTickets} = r
    
    console.log(wlAddresses,wlTokens,wlTickets)