Destructuring array of objects in es6

30,703

Solution 1

Whether using destructuring would actually be a simplification is debatable but this is how it can be done:

const [
  { data: array0 },
  { data: array1 },
  { data: array2 }
] = someArray

Live Example:

const someArray = [
  { data: 1 },
  { data: 2 },
  { data: 3 }
];

const [
  { data: array0 },
  { data: array1 },
  { data: array2 }
] = someArray

console.log(array0, array1, array2);

What is happening is that you're first extracting each object from someArray then destructuring each object by extracting the data property and renaming it:

// these 2 destructuring steps
const [ obj1, obj2, obj3 ] = someArray // step 1
const { data: array0 } = obj1 // step 2
const { data: array1 } = obj2 // step 2
const { data: array2 } = obj3 // step 2

// written together give
const [
  { data: array0 },
  { data: array1 },
  { data: array2 }
] = someArray

Maybe combine destructuring with mapping for (potentially) more readable code:

const [array0, array1, array2] = someArray.map(item => item.data)

Live Example:

const someArray = [
  { data: 1 },
  { data: 2 },
  { data: 3 }
];

const [array0, array1, array2] = someArray.map(item => item.data)

console.log(array0, array1, array2);

Solution 2

I believe what you actually want is

const array = someArray.map(x => x.data)

If you really want three variables (Hint: you shouldn't), you can combine that mapping with destructuring:

const [array0, array1, array2] = someArray.map(x => x.data)

Solution 3

If you want to do with this pure JS then follow this code snippet. It will help you.

let myArray = [
    {
        "_id": "1",
        "subdata": [
            {
                "subid": "11",
                "name": "A"
            },
            {
                "subid": "12",
                "name": "B"
            }
        ]
    },
    {
        "_id": "2",
        "subdata": [
            {
                "subid": "12",
                "name": "B"
            },
            {
                "subid": "33",
                "name": "E"
            }
        ]
    }
]


const array = myArray.map(x => x.subdata).flat(1)

const isExist = (key,value, a) => {
  return a.find(item => item[key] == value)
}

let a = array.reduce((acc, curr) => {
  if(!isExist('subid', curr.subid, acc)) {
    acc.push(curr)
  }
  return acc
}, [])

console.log(a)

Share:
30,703
ssss
Author by

ssss

Updated on January 27, 2021

Comments

  • ssss
    ssss over 3 years

    In es6, how can i simplify the following lines using destructuring?:

    const array0 = someArray[0].data;
    const array1 = someArray[1].data;
    const array2 = someArray[2].data;
    
  • T.J. Crowder
    T.J. Crowder over 6 years
    LOL, and here we all got caught up on the request to do it with destructuring.
  • Daniel
    Daniel about 6 years
    It's possible to use this to get an array with a specific property of an array of objects ? (length of array is random)
  • Aksen P
    Aksen P over 4 years
    What question you've tried to solve? The current post is done.
  • Ivandez
    Ivandez about 3 years
    This is exactly what I was looking for, thanks mate