26

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;
ssss
  • 303
  • 1
  • 4
  • 7

5 Answers5

43

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);
nem035
  • 34,790
  • 6
  • 87
  • 99
  • 4
    It's possible to use this to get an array with a specific property of an array of objects ? (length of array is random) – Daniel Jun 25 '18 at 10:19
21

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)
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
1

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)
anurag sharma
  • 61
  • 1
  • 6
0
const myInfo = someArray.map((item) => {
const {itemval1, itemval2} = item;
return(
   //return data how you want it eg:
   <p>{itemval1}</p>
   <p>{itemval2}</p>)
})

This is how I did it in react, correct me if m wrong, I'm still new to this world

Zia Yamin
  • 942
  • 2
  • 10
  • 34
Jackie Nomsa
  • 1
  • 2
0

@Daniel, I presume you were looking to destructure a nested Object in an array of Objects. Following @nem035 was able to extract the nested Object's property using his pattern.

What is happening is that you're first extracting each object from addresses array then destructuring each object by extracting its properties and renaming it including the nested Object:

addresses = [
  {
    locality:"Sarjapura, Bangalore",
    coordinates:{latitude:"12.901160", longitude:"77.711680"}
  },
  {
    locality:"Vadakara, Kozhikode",
    coordinates:{latitude:"11.588980", longitude:"75.596450"}
  }
]
    
const [
  {locality:loc1, coordinates:{latitude:lat1, longitude:ltd1}}, 
  {locality:loc2, coordinates:{latitude:lat2, longitude:ltd2}}
] = addresses

console.log(`Latitude of Vadakara :: ${lat2}`)
KaLi
  • 149
  • 1
  • 4