Destructuring an array of objects (es6)

Question

I'm wondering how to destructure an array of objects. I'm attempting to destructure country from the partner array. It is a project requirement that partner be an array of objects, even though there should only ever be one partner country per obj.

arr = [
   { title: "Title A",
     desc: "Desc A",
     role: {role_desc: "Role Desc A", role_name: "Role A"},
     partner: [{country: "Brazil", region: "SA"}]
   },
   { title: "Title B",
     desc: "Desc B",
     role: {role_desc: "Role Desc B", role_name: "Role B"},
     partner: [{country: "US", region: "NA"}]
   }
]

I am able to populate a table with data for all fields except partner.

arr.map(
  ({ title, desc, role: {role_name}, partner: [{country}] }) => 
  ({ title, desc, role: {role_name}, partner: [{country}] })
);

I've referred to Destructure object properties inside array for all elements and Destructuring an array of objects with es6, and it looks like it is not possible to do this without transforming the data first.

Any help would be appreciated (and apologies for the dupe).

[`JS demo`](https://jsbin.com/yocatipefi/edit?js,console) i don't see any problem in destructuring here, please explain where is problem — Code Maniac, Oct 22 '19 at 18:20
`let [{ partner:[{ country }] }] = arr;` returns country "Brazil", not sure why you would want to do it this way tho... — Asleepace, Oct 22 '19 at 18:25
Could you provide the JSON output/result, how should the transformation look like. It seems that there is a lot of unclarity regarding your question — EugenSunic, Oct 22 '19 at 18:26

score 3 · Answer 1 · answered Oct 22 '19 at 18:51

You can simply use default value when you want to handle the case when partner is empty array,

const arr = [{ title: "Title A",desc: "Desc A",role: {role_desc: "Role Desc A", role_name: "Role A"},partner: [{country: "Brazil", region: "SA"}]},{ title: "Title B",desc: "Desc B",role: {role_desc: "Role Desc B", role_name: "Role B"},partner: [{country: "US", region: "NA"}]},{ title: "Title C",desc: "Desc C",role: {role_desc: "Role Desc C", role_name: "Role C"},partner: []}]

const final = arr.map(
  ({ title, desc, role: {role_name}, partner}) => 
  ({ title, desc, role: {role_name}, partner:[ {country} = {country: undefined } ] })
);

console.log(final)

That being said we should keep our code as readable as possible, here it becomes so hard on eyes instead of trying to save one extra line, we should opt for making it more readable

const arr = [{ title: "Title A",desc: "Desc A",role: {role_desc: "Role Desc A", role_name: "Role A"},partner: [{country: "Brazil", region: "SA"}]},{ title: "Title B",desc: "Desc B",role: {role_desc: "Role Desc B", role_name: "Role B"},partner: [{country: "US", region: "NA"}]},{ title: "Title C",desc: "Desc C",role: {role_desc: "Role Desc C", role_name: "Role C"},partner: []}]

const final = arr.map(
  ({ title, desc, role: {role_name}, partner}) => {
     let country = partner[0] && partner[0].country || undefined
    return { title, desc, role: {role_name}, partner:[ {country}] }
  }
);

console.log(final)

score 1 · Accepted Answer · answered Oct 22 '19 at 18:40

I was overlooking a very simple answer due to an equally simple error:

arr.map(
  ({ title, desc, role: {role_name}, partner}) => 
  ({ title, desc, role: {role_name}, partner: (partner[0] && partner[0].country) || 'Undefined' })
);

Every item in the array did not necessarily have a "country" property. For certain items, partner is just an empty array. The above fixed the issue.

I agree that it doesn't make sense to make partner an array if it will only ever contain one object. Client requirements, however.

Destructuring an array of objects (es6)

2 Answers2