Angular - Push API response into an array

Question

I have a situation where i need to push the response of an API called to an array. Previously, I hard coded the data like this.

filterrole = [
{ text: 'Supervisor', value: 'Supervisor' },
{ text: 'Administrator', value: 'Administrator'},
{ text: 'Maintainer', value: 'Maintainer' }
];

But now, i need to get the data from the backend. The backend query is fine. this is how the result looks like from the backend called.

["Supervisor","Maintainer","Observer","Administrator"]

the filterrole has it own class which consist of text and value variable.

Role.class

export class Role {
text: string;
value: string;
}

My question is, how do I push the response from the API call into the filterrole variable ? Below is my workaroud.

export class AddGroupComponent implements OnInit {
     filterrole: Role [];
     ngOnInit() {
          this.getDistinctRole();
     }

     getDistinctRole(): void {
     this._dashboardservice.getDistinctRole().subscribe(
        resp => {
           // what should i do here to push the data into
           // filterdata.text and filterdata.value
        },
        err => {
           this.loading = false;
           this._nzMessage.create('error', `Error occurred: ${err.message}`);
       }
     );
 }

Why do you need separate properties for the same value (according to the first code snippet)? — Edric
– Edric, Commented Jan 2, 2019 at 11:28
@Edric probably some third party control (combobox ?) requires it in this format. — Sebastian Oleński
– Sebastian Oleński, Commented Jan 2, 2019 at 11:34
@Edric hi edric. the first code snippet is the hard coded part. Now i need to get the value from the API call which read the data from the database. — ameruddin jamil
– ameruddin jamil, Commented Jan 3, 2019 at 5:15

Soumya B. Athani · Accepted Answer · 2019-01-03 13:31:19Z

3

you can do like this as well

export class AddGroupComponent implements OnInit {
     filterrole = [];
     ngOnInit() {
          this.getDistinctRole();
     }

     getDistinctRole(): void {
     this._dashboardservice.getDistinctRole().subscribe(
        resp => {
           this.fliterRole(resp);
        },
        err => {
           this.loading = false;
           this._nzMessage.create('error', `Error occurred: ${err.message}`);
       }
     );
      filterRole(result) {
         for(let i =0; i < result.length; i++) {
            this.filterrole.push({ text: result[i], value: result[i] });
       }
 }

this is working example https://codesandbox.io/s/525xw2097n

edited Jan 3, 2019 at 13:31

answered Jan 2, 2019 at 11:40

Soumya B. Athani

3781 gold badge3 silver badges13 bronze badges

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

2 Comments

Edric Over a year ago

Could you please explain this code snippet in some detail? This can help others who want to know how this code snippet is different from the code snippet that OP posted or those who want to know what the code actually does.

Soumya B. Athani Over a year ago

@Edric thank you for your suggestion i have added working code please check that

Sebastian Oleński · Accepted Answer · 2019-01-02 11:44:06Z

1

Just do it like this

   resp => {
            this.filterrole = resp.map(x => ( {text: x, value: x } )) 
        },

and change the Role class to an interface

export interface Role {
  text: string;
  value: string;
}

Or if you still want to have it as a class then create a constructor

export class Role {
  constructor(public value: string, public text: string) 
}

and then

 resp => {
            this.filterrole = resp.map(x => new Role(x,x)); 
        },

or if you want just mutate the array without reassigning:

resp => {
               resp.forEach(x =>  this.filterrole.push(new Role(x,x)) ); 
        },

but in this case don't forget to initalize filterrole somewhere.

edited Jan 2, 2019 at 11:44

answered Jan 2, 2019 at 11:37

Sebastian Oleński

5384 silver badges15 bronze badges

1 Comment

ameruddin jamil Over a year ago

Thank you so much for the effort sir. I really appreciate it.. i really new to this angular and typescript. this kind of example really help me to understand more.

Arman sheikh · Accepted Answer · 2019-01-02 11:38:35Z

0

You can push the api response with below code. let me know if you had any trouble assigning to it.

`resp => {
    // what should i do here to push the data into
    // filterdata.text and filterdata.value
    for (i in resp.data) { 
    filterrole.push(resp[i]);
    }
}`

answered Jan 2, 2019 at 11:38

Arman sheikh

1962 silver badges7 bronze badges

Collectives™ on Stack Overflow

Angular - Push API response into an array

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related