Mapping response data to a new type using TypeScript in Angular 2

Question

Mapping response data to a new type using TypeScript in Angular 2

Consider the following:

userGroups: IUserGroup[];
this.service.getUserGroups().subscribe(g => this.userGroups = g);

The getUserGroups function returns IUserDifferentGroup[]. However, both IUserGroup and IUserDifferentGroup share the same fields, with IUserGroup having some additional ones. How can we map the response to a new type?

interface IUserDifferentGroup{
    Name: string;
    Code: string;
    Id: number;
}

interface IUserGroup {
    Id: number;
    GroupName: string;
    Visible: boolean;
    IsDefault: boolean;
    CanAssociated: boolean;
}

angular typescript

Answer 1

Answer №1

Insert this code snippet within the subscribe function:

this.service.getUserGroups().subscribe(g => this.userGroups = g as IUserGroup[]);

MODIFICATION

Based on feedback, update the code as follows:

interface IUserDifferentGroup {
    Name: string;
    Code?: string; // <-- changed to optional
    Id: number;
}

interface IUserGroup {
    Id: number;
    GroupName: string;
    Visible: boolean;
    IsDefault: boolean;
    CanAssociated: boolean;
}

Then, revise the subscribe method to:

this.service.getUserGroups().map(g => return {Name: g.GroupName, Id: g.Id})
 .subscribe(g => {
  this.userGroups = g as IUserGroup[];
});

Try implementing these changes and verify if it resolves the issue.

Answer 2

Insert this code snippet within the subscribe function:

this.service.getUserGroups().subscribe(g => this.userGroups = g as IUserGroup[]);

MODIFICATION

Based on feedback, update the code as follows:

interface IUserDifferentGroup {
    Name: string;
    Code?: string; // <-- changed to optional
    Id: number;
}

interface IUserGroup {
    Id: number;
    GroupName: string;
    Visible: boolean;
    IsDefault: boolean;
    CanAssociated: boolean;
}

Then, revise the subscribe method to:

this.service.getUserGroups().map(g => return {Name: g.GroupName, Id: g.Id})
 .subscribe(g => {
  this.userGroups = g as IUserGroup[];
});

Try implementing these changes and verify if it resolves the issue.

Mapping response data to a new type using TypeScript in Angular 2

Answer №1

Similar questions

Error: You're attempting to read content that has already been accessed

Using a for loop in Javascript with a specified increment value

Methods for organizing consecutive elements within an array in Javascript/Typescript

When using create-react-app with JEST to run tests, TypeScript errors are not displayed

A guide to creating test cases for conditional statements in Angular using Jasmine

Unlock the power of Angular Component methods even when outside the Angular library with the help of @ViewChild()

Error in pagination when using MAX() function in PostgreSQL query

The Angular Fire Firestore module does not include the 'FirestoreSettingsToken' in its list of exported members

Is ngForIn a valid directive in Angular 4?

Using JSDoc to Include TypeScript Definitions

The Tools of the Trade: TypeScript Tooling

The data retrieved from Firebase is coming back as not defined

conceal a div in Angular when the user is authenticated

Is it better to wait for an ajax request to finish loading in a vue or angular SSR environment?

Is there a way to bypass type assertion while implementing spread syntax in an array that includes generics?

Exploring Angular 5: Injecting a Service in Unconventional Places

`Why Lazy Loading Modules in Angular2(RC-6) is Not Possible`

Acquiring the download link for Firebase Storage in Angular 2+ technology

The Angular Button fails to display when all input conditions are met

What are some ways to enhance Rxjs syntax?