How to map http response to client model type in Angular

Question

I have model MyObejct like this in client:

class MyObject{
 id: number;
 name: string;
 active: boolean;
}

And the http response json data like this:

[
 {
  id: "1",
  name: "object1",
  active: "true",
 }
]

The http response is key-value pair, and all the value type is string. So how can I map the http response to 'MyObject' type. The http get function is like this:

getMyObejct(name: string): Observable<MyObject> {
 const url = this.url + 'name/' + name;
 return this.http.get<MyObject>(url);  // This is part I'm confused
}

getAllObjects(): Observable<MyObject[]> {
 return this.http.get<MyObject>(this.url); // How to map this reponse to MyObject
}

The http response values are all string type, but MyObject has types number and boolean. How can I do that?

GreyBeardedGeek · Accepted Answer · 2019-09-29 04:07:35Z

1

It depends on whether you truly need an instance of MyObject, or just something with the same properties.

If you just need an object with the same properties, you can do:

return this.http.get<MyObject>(url).map( (obj) => {
  id: Number(obj.id), 
  name: obj.name,
  active: obj.active === 'true'
});

If you need an actual MyObject instance (e.g. if MyObject has methods), you can do:

return this.http.get<MyObject>(url).map( (obj) => Object.assign(new MyObject(), {
  id: Number(obj.id), 
  name: obj.name,
  active: obj.active === 'true'
}));

answered Sep 29, 2019 at 4:07

GreyBeardedGeek

30.3k2 gold badges51 silver badges71 bronze badges

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

Comments

raychz · Accepted Answer · 2019-09-29 04:36:24Z

0

You may want to look into class-transformer. The plainToClass method transforms a plain javascript object to an instance of a specific class.

import {plainToClass} from "class-transformer";

fetch(url).then((objects: MyObject[]) => {
    const realMyObjects = plainToClass(MyObject, objects);
    // now each object in realMyObjects is an instance of MyObject class
});

In your case, you'll need to enable implicit type conversion:

class MyPayload {
  prop: string
}

const result1 = plainToClass(MyPayload, { prop: 1234 }, { enableImplicitConversion: true });

/**
 *  result1 will be `{ prop: "1234" }` - notice how the prop value has been 
 *  converted to string.
 */

edited Sep 29, 2019 at 4:36

answered Sep 29, 2019 at 4:27

raychz

1,2051 gold badge10 silver badges26 bronze badges

Comments

Hemendra · Accepted Answer · 2019-09-29 10:07:36Z

0

To specify the response object type, first define an interface with the required properties. (Use an interface rather than a class; a response cannot be automatically converted to an instance of a class.)

interface MyObject{
 id: number;
 name: string;
 active: boolean;
}

getAllObjects(): Observable<MyObject[]> {
 return this.http.get<MyObject>(this.url); // now returns an Observable of MyObject[]
}

Read more about it here - https://angular.io/guide/http#typechecking-the-response

answered Sep 29, 2019 at 10:07

Hemendra

3885 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to map http response to client model type in Angular

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related