Playing with an array of objects

Question

Playing with an array of objects

How can we modify an array of objects in Angular Typescript by replacing certain values and adding new key-value pairs?

I need to swap the id value with memberId and then introduce a new key fullName that combines firstName and lastName.

Any suggestions or assistance would be greatly appreciated. Thanks!

#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 Output

[
    {
        "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
            }
        ]
    }
]

angular typescript

Answer 1

Answer №1

You're just a step away from completing this task. Make sure to update the id property and add the fullName property as shown below:

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

If you prefer, you can achieve the same result by using Pipes and mapping the Observable with an 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
          };
        })
      )
    );
}

Check out a Sample Solution on StackBlitz

Answer 2

You're just a step away from completing this task. Make sure to update the id property and add the fullName property as shown below:

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

If you prefer, you can achieve the same result by using Pipes and mapping the Observable with an 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
          };
        })
      )
    );
}

Check out a Sample Solution on StackBlitz

Answer 3

Answer №2

Do you mean something like this?

this.responseData = this.responseData.map((element) => {
    return {
       ...element,
       id: element.memberId
    }
});

Answer 4

Do you mean something like this?

this.responseData = this.responseData.map((element) => {
    return {
       ...element,
       id: element.memberId
    }
});

Playing with an array of objects

Answer №1

Answer №2

Similar questions

Unique constraint for Mongoose string schema attribute

Launching Angular Component in a New Tab

Using Rollup alongside @rollup/plugin-babel and Typescript: Anticipated a comma, received a colon instead

What is the best way to integrate OAuth into a stateless REST API?

Is there a way to customize the default styles of Kendo UI for Angular?

❴eslint_d❵ [eslint] Oops! It looks like there was an issue loading the 'import' plugin declared in your .eslintrc.js file

Updating the hostbinding to dynamically add a class

There is no property called 'x' in type 'y'

Angular 16 HttpClient post request with asynchronous action

In the event that you encounter various version formats during your work

Error message "Uncaught in promise" is being triggered by the calendar function within the Ionic

Obtaining a TemplateRef from a directive: The process explained

Allow Nest.js server to receive binary files in the request body

The call does not match any overloads in Vue when using TypeScript

Error encountered during compilation of a TypeScript file using tsc command in Terminal

The 'autoComplete' property cannot be found within the 'IntrinsicAttributes & InputProps' type

Creating a Download file popup in a Spring MVC application for an Angular front end

Learning how to implement the "as" syntax in TypeScript

Ionic 2 - renders an array of objects [object, object]

Ignoring TypeScript type errors in ts-jest is possible