Json Array to custom class array in typescript

Question

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?

What do you mean by custom class array? Can you share the expected output — Nicholas K
– Nicholas K, Commented Sep 29, 2019 at 10:35
Also, as per your edit since the current array object doesn't have the Checked field - you either have to remove it OR make it optional like Checked?:boolean — Nicholas K
– Nicholas K, Commented Sep 29, 2019 at 10:39
i make Checked field optional but it does not work. i want to convert this json data to my class array Roles[]. — Hunzla Ali
– Hunzla Ali, Commented Sep 29, 2019 at 10:47

Nicholas K · Accepted Answer · 2019-09-29 11:31:03Z

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;
}

The property names are case-sensitive
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; 
   }
);

edited Sep 29, 2019 at 11:31

answered Sep 29, 2019 at 10:34

Nicholas K

15.4k8 gold badges35 silver badges59 bronze badges

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

13 Comments

Hunzla Ali Over a year ago

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."

Nicholas K Over a year ago

I've made an edit. Can you try with that? Here's the working stackblitz stackblitz.com/edit/new-del

Hunzla Ali Over a year ago

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.

Nicholas K Over a year ago

Then you will need to share that code as well. Share the code of how you are subscribing to this API..

Hunzla Ali Over a year ago

this.http.get('api/user/GetAllRoles'). subscribe(res => { let roles: Roles[] = JSON.stringify(res); console.log("api roles "+ roles) })

|

Benjamin O. P. · Accepted Answer · 2019-09-29 11:28:58Z

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[].

edited Sep 29, 2019 at 11:28

answered Sep 29, 2019 at 11:23

Benjamin O. P.

1068 bronze badges

Collectives™ on Stack Overflow

Json Array to custom class array in typescript

2 Answers 2

13 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related