CODEWITHSUNDEEP
javascriptecmascript-6destructuring
ssss
ssss

Reputation: 313

Destructuring array of objects in es6

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;

Upvotes: 26

Views: 53985

Answers (5)

KaLi
KaLi

Reputation: 149

@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}`)

Upvotes: 0

Jackie Nomsa
Jackie Nomsa

Reputation: 1

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

Upvotes: 0

anurag sharma
anurag sharma

Reputation: 61

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)

Upvotes: 1

Bergi
Bergi

Reputation: 664538

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)

Upvotes: 22

nem035
nem035

Reputation: 35491

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);

Upvotes: 46

Related Questions