Manipulating array of objects

Issue

How do we manipulate an array of object to replace certain values and add new key and values in angular typescript?

I wanted to replace id value with memberId value and then add another key fullName where value is firstName + lastName.

Thanks for any idea and help. Appreciated. Regards.

#Current solution

 this.data = this.data.map((item) => {
              let id = item.memberId;
              return {
                ...item,
              }
            });

#Original Data

[
    {
        "id": 10017,
        "firstName": "Alexa",
        "lastName": "Rimura",
        "roleDisplay": "COVP,DVP Real Estate",
        "companyName": "MS",
        "title": "COO",
        "memberId": 1,
        "roleDto": [
            {
                "id": 6,
                "name": "COVP", 
                "isShow": true,
                "transactionRoleId": 9
            },
            {
                "id": 7,
                "name": "DVP Real Estate",
                "isShow": true,
                "transactionRoleId": 6
            }
        ],
        "transactionRoleList": "Architect, Construction Project Director"
    },
    {
        "id": 10018,
        "firstName": "Briana",
        "lastName": "Christoval",
        "roleDisplay": "Architect,Construction Project Director",
        "companyName": null,
        "title": null,
        "memberId": 2,
        "roleDto": [
            {
                "id": 8,
                "name": "Architect",
                "isShow": true,
                "transactionRoleId": 12
            },
            {
                "id": 9,
                "name": "Construction Project Director",
                "isShow": true,
                "transactionRoleId": 11
            }
        ]
    }
]

#Expected Ouput

[
    {
        "id": 1,
        "firstName": "Alexa",
        "lastName": "Rimura",
        "fullName": "Alexa Rimura
        "roleDisplay": "COVP,DVP Real Estate",
        "companyName": "MS",
        "title": "COO",
        "memberId": 1,
        "roleDto": [
            {
                "id": 6,
                "name": "COVP", 
                "isShow": true,
                "transactionRoleId": 9
            },
            {
                "id": 7,
                "name": "DVP Real Estate",
                "isShow": true,
                "transactionRoleId": 6
            }
        ],
        "transactionRoleList": "Architect, Construction Project Director"
    },
    {
        "id": 2,
        "firstName": "Briana",
        "lastName": "Christoval",
        "fullName:" "Briana Christoval,
        "roleDisplay": "Architect,Construction Project Director",
        "companyName": null,
        "title": null,
        "memberId": 2,
        "roleDto": [
            {
                "id": 8,
                "name": "Architect",
                "isShow": true,
                "transactionRoleId": 12
            },
            {
                "id": 9,
                "name": "Construction Project Director",
                "isShow": true,
                "transactionRoleId": 11
            }
        ]
    }
]

Solution

You are almost there. Update id property and add fullName property as below:

this.data = data.map((item) => {
  return {
    ...item,
    id: item.memberId,
    fullName: item.firstName + ' ' + item.lastName
  }
});

---

Alternatively, you can do the logic with Pipe/map the Observable via rxjs operator.

getMembers() {
  return this.http.get<any[]>('/assets/data.json')
    .pipe(
      map((items: any[]) =>
        items.map(item => {
          return {
            ...item,
            id: item.memberId,
            fullName: item.firstName + ' ' + item.lastName
          };
        })
      )
    );
}

Sample Solution on StackBlitz

Answered By – Yong Shun

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0