1

I have following Json

[{"id":1,"role":"Admin"},{"id":2,"role":"Manager"},{"id":3,"role":"User"}]

I want to iterate this and add to my custom class array which has same properties (id,role,ischecked) in angular typescript.

My Custom class

class Roles{
    ID:number;
    Role:string;
    Checked:Boolean;
}

How can i achieve it?

Hunzla Ali
  • 383
  • 2
  • 5
  • 22

2 Answers2

1

Given the array :

  data = [
    { id: 1, role: "Admin" },
    { id: 2, role: "Manager" },
    { id: 3, role: "User" }
  ];

you can use the following syntax:

let roles: Roles[] = this.data;

Roles should be defined to: 

export class Roles {
    id: number;
    role: string;
    checked?: Boolean;
}
  1. The property names are case-sensitive
  2. checked is optional now denoted by ?:

EDIT

Since the API returns a response in the format of Roles[] you can simply do:

.subscribe((res: Roles[]) => { 
      let roles = res; 
   }
);
Nicholas K
  • 15,148
  • 7
  • 31
  • 57
  • while assigning to result variable it give me following error "Conversion of type 'string' to type 'Roles[]' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first." – Hunzla Ali Sep 29 '19 at 10:53
  • I've made an edit. Can you try with that? Here's the working stackblitz https://stackblitz.com/edit/new-del – Nicholas K Sep 29 '19 at 10:53
  • now i am getting this error "Type 'string' is not assignable to type 'Roles[]'." Actually i am using api to get this data and convert that data into json by using JSON.stringify function. – Hunzla Ali Sep 29 '19 at 10:58
  • Then you will need to share that code as well. Share the code of how you are subscribing to this API.. – Nicholas K Sep 29 '19 at 10:59
  • this.http.get('api/user/GetAllRoles'). subscribe(res => { let roles: Roles[] = JSON.stringify(res); console.log("api roles "+ roles) }) – Hunzla Ali Sep 29 '19 at 11:04
  • In what format are you getting the response intially from the API? – Nicholas K Sep 29 '19 at 11:05
  • [object Object] – Hunzla Ali Sep 29 '19 at 11:08
  • Do you understand how an API works? Is response of *type* json, string, xml...? – Nicholas K Sep 29 '19 at 11:09
  • All I'm asking is when you hit the API from any client in what format does the API return the response? Is it of type json - If yes how does the response look? – Nicholas K Sep 29 '19 at 11:13
  • return type is Task and i am sending list of table with OK status. – Hunzla Ali Sep 29 '19 at 11:15
  • Please share the response – Nicholas K Sep 29 '19 at 11:16
  • (3) [{…}, {…}, {…}] 0: {id: 1, role: "Admin", checked: false} 1: {id: 2, role: "Manager", checked: false} 2: {id: 3, role: "User", checked: false} – Hunzla Ali Sep 29 '19 at 11:23
  • All you need to do then is: `.subscribe((res: Roles[]) => { let roles = res; })`. Now `roles` contains the entire json response as an array of Roles. – Nicholas K Sep 29 '19 at 11:25
0

If you have this json-response:

[{"id":1,"role":"Admin"},{"id":2,"role":"Manager"},{"id":3,"role":"User"}]

you should modified your request as:

this.http.get<Role[]>('api/user/GetAllRoles').subscribe((res: HttpResponse) => (roles = res));

This will cast the response to Role[] without the need of JSON.stringify. Before you have to declare roles: Role[].

Benjamin O. P.
  • 106
  • 8