Angular2 mapping object properties

Question

Apologies for this probably super confusing title, I don't know if its exactly accurate with what I am trying to do.

I have a component that is assigning objects of data to variables so that they can be typecast. I have interfaces created for this purpose:

export interface Role {
    RoleID: number;
    RoleName: string;
}

export interface Language {
    LanguageID: number;
    LanguageName: string;
}


...

roles: Role[] = [];
languages: Language[] = [];

I am using an npm module called ng-select which adds some extended functionality to select inputs.

My HTML is set up like so:

<ng-select 
 [allowClear]="true"
 [items]="roles"
 placeholder="No role selected">
</ng-select>

All of my select inputs use an ID (value) and Label (text). This is great because the module allows for that.

Array of items from which to select. Should be an array of objects with id and text properties.

My question is as follows: The object that this module is wanting is needed the property names to be id and text. Since I am typing my inputs to the interface though, I am unable to rename them in there.

Are there any suggestions on how I can map this data in a way where I can provide the module my object and say that RoleID = id and RoleName = text for example.

In short, my current object of:

{
    RoleID: 123,
    RoleName: 'Admin'

}

Needs to be:

{
    id: 123,
    text: 'Admin'

}

what is the question??

Aravind
– Aravind

2017-07-18 18:30:09 +00:00
Commented Jul 18, 2017 at 18:30 — Aravind
– Aravind, Commented Jul 18, 2017 at 18:30
@Aravind - It has been answered, thanks!

SBB
– SBB

2017-07-18 18:47:44 +00:00
Commented Jul 18, 2017 at 18:47 — SBB
– SBB, Commented Jul 18, 2017 at 18:47

Alexander Staroselsky · Accepted Answer · 2019-11-14 17:13:29Z

9

You can bind the [items] attribute to a method of the component class that returns an array of transformed objects using Array.prototype.map:

HTML:

<ng-select 
 [allowClear]="true"
 [items]="roleItems"
 placeholder="No role selected">
</ng-select>

TS:

roleItems: Role[] = [];

getRoles(): Role[] {
    this.roleItems = this.roles.map((role: Role) => {
        return { id: role.RoleID, text: role.RoleName };
    });
}

Update: Here is a plunker demonstrating the functionality in action with a simple list and ngFor.

edited Nov 14, 2019 at 17:13

answered Jul 18, 2017 at 18:30

Alexander Staroselsky

39k16 gold badges83 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

SBB Over a year ago

sweet, that looks to be exactly what I need! Will accept shorty, you were too quick on the answer ;)

cnps Over a year ago

It's a bad practice to get roles in template, as it will be called with each change detection. This can potentially destroy your app performance. Also, why the any type instead of Role[]?.

Alexander Staroselsky Over a year ago

@cnps you’re right. I created this answer years ago in a hurry. It was meant to quickly show how to use Array.prototype.map because the OP didn’t provide details on how they load the data needing to be mapped.

cnps Over a year ago

@AlexanderStaroselsky yea, I noticed the answer was a couple years old, but should probably be updated, so new people don't think it's a good solution.

Collectives™ on Stack Overflow

Angular2 mapping object properties

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related