Array manipulation/mapping returning undefined

Question

I'm trying to reorganise/restructure my data to send back to the api. I am mapping values into their respective new properties.

Incoming prop:

const data = [
  {
    otherProperty: "string",
    otherPropertyTwo: "string",
    personId: "1269",
    peopleGroups: [
      { group: "SENIORS", groupStatus: "paid" },
      { group: "Infants", groupStatus: "not_paid" }
    ]
  }
];

and need to restructure into this whilst not leaving in any other properties other than the ones below:

 const statusArrayUpdate = [{
     "personid": "1269",
     "groups": [
       {
         "group": "seniors",
         "status": "paid"
       },
    {
         "group": "Infants",
         "status": "not_paid"
       }
     ]
   }]

I tried this but getting undefined on the 2nd mapping, groups property...

const statusArrayUpdate = data.map(d => ({ ...d, personId: d.personId, groups: d.peopleGroups.map(s => [group: s.group, status: s.groupStatus]) }));

Answer 1

You can use map on your data array and just take the personId and rename the peopleGroups of each object, and rename groupStatus to status for each element in groups .

 const data = [ { otherProperty: "string", otherPropertyTwo: "string", personId: "1269", peopleGroups: [ { group: "SENIORS", groupStatus: "paid" }, { group: "Infants", groupStatus: "not_paid" } ] } ]; const statusArrayUpdate = data.map(({ personId, peopleGroups }) => ({ personId, groups: peopleGroups.map(({ group, groupStatus }) => ({ group, status: groupStatus })) })); console.log(statusArrayUpdate)