Angular2 HTTP GET - Cast response into full object

Question

I have this simple Component

import {Component} from 'angular2/core';
import {RouterLink, RouteParams} from 'angular2/router';
import {Http, Response, Headers} from 'angular2/http';
import {User} from '../../models/user';
import 'rxjs/add/operator/map';


@Component({
    template: `
        <h1>{{user.name}} {{user.surname}}</h1>
    `,
    directives: [RouterLink],
})
export class UserComponent {

    user: User;

    constructor(private routeParams: RouteParams,
        public http: Http) {
            this.user = new User();
            this.http.get('http://localhost:3000/user/' + this.routeParams.get('id'))
                .map((res: Response) => res.json())
                .subscribe((user: User) => this.user = user);
        console.log(this.user);
    }
}

Why does subscribe not cast the response into a full User object. When I am logging the user variable my console say User {_id: undefined, name: undefined, surname: undefined, email: undefined}. But nevertheless binding to .name and .surname in the view is working..

What happens here? Where is the user actually stored?

Possible duplicate of How do I cast a JSON object to a typescript class — Günter Zöchbauer
– Günter Zöchbauer, Commented Mar 15, 2016 at 14:34
I read this is a good article also stackoverflow.com/questions/63964124/… — user13889515
– user13889515, Commented Sep 20, 2020 at 9:33

Przemek Struciński · Accepted Answer · 2017-10-11 09:28:58Z

25

Good practice is to consume data from GET response using

Observable<Model>

(regarding to Angular documentation https://angular.io/guide/http) so...

// imports

import {HttpClient} from "@angular/common/http";

// in constructor parameter list

private http: HttpClient

// service method

getUser(): Observable<User> {return this.http.get<User>({url}, {options});}

You do not need to do anything more. I consider this approach as most friendly.

edited Oct 11, 2017 at 9:28

answered Oct 11, 2017 at 9:17

Przemek Struciński

5,2381 gold badge32 silver badges20 bronze badges

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

8 Comments

ovmcit5eoivc4 Over a year ago

This will work for most approaches, but it doesn't cast, more like a type assertion. If you have a function in your class export class User { test() { console.log("works"); } } You can't run user.test().

Darren Lewis Over a year ago

Just to avoid confusion for anyone this approach is only available in Angular 4.3+ where the new HttpClient was introduced.

Anil Over a year ago

@DarrenLewis , what is approach we have to use if get method wants to return array of Model?

Przemek Struciński Over a year ago

@Anil This method works fine also for an array of Model. Just instead of User you put User[]

fishbone Over a year ago

The author's problem is that his log command is executed before the response arrives. Your answer isn't related to the author's problem at all in my opionion. Furthermore he asks for a "full User object" which I interpret as User class instance. So even if his log was at the correct possition your answer would be wrong as it will return a plain object (as ovmcit5eoivc4 pointed out above)

|

Derlin · Accepted Answer · 2017-10-02 11:41:16Z

22

Found a solution here: https://stackoverflow.com/a/29759472/2854890

My Method now looks like this:

constructor(private routeParams: RouteParams,
    public http: Http) {
    this.user = new User();
    this.http.get('http://localhost:3000/user/' + this.routeParams.get('id'))
        .map((res: Response) => res.json())
        .subscribe((json: Object) => {
            this.user = new User().fromJSON(json);
        });
}

I enhanced the Serializable by returning the object in the end, so I can leave out something like

var u = new User();
u.fromJSON(...);

and just write

new User().fromJSON(json);

Serializable class

export class Serializable {

    fromJSON(json) {
        for (var propName in json)
            this[propName] = json[propName];
        return this;
    }

}

edited Oct 2, 2017 at 11:41

Derlin

9,9212 gold badges34 silver badges57 bronze badges

answered Mar 15, 2016 at 21:23

Daniel Hitzel

1,3422 gold badges12 silver badges27 bronze badges

4 Comments

Kristopher Windsor Over a year ago

In Angular 6 that map() line is giving error:

Argument of type '(res: Response) => Promise<any>' is not assignable to parameter of type '(value: Response, index: number) => Promise<any>'.

Daniel Hitzel Over a year ago

map has changed in Angular 6. Check this out: academind.com/learn/angular/snippets/…

fishbone Over a year ago

@DanielHitzel Your original problem was that your console.log is executed before the response arrived. Even if it was at the correct position, you would overwrite the value in your subscribe handler by a plain object (this.user = user) which is not an instance of User anymore (Nevertheless a User-compatible object with same properties). Both problems are solved by this answer. However, I wanted to point out that your actual problem - property values are undefined - originated in another mistake.

Daniel Hitzel Over a year ago

looking at the code with more experience, yes that's seems to be true :D

Community · Accepted Answer · 2017-05-23 12:02:37Z

0

That's not supported by TypeScript.

See How do I cast a JSON object to a typescript class for more details.

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Mar 15, 2016 at 14:34

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

4 Comments

Daniel Hitzel Over a year ago

But why am I able to bind to the data anyway. It gets displayed, whereas the variable I am binding to is logged as undefined.. How does binding work then

Günter Zöchbauer Over a year ago

JSON and object is interchangeable in TypeScript/JS but the created object will only contain what the JSON contained, but no methods or other fields that are only defined in the prototype of of the real class.

Daniel Hitzel Over a year ago

if I change this to .subscribe(data => this.user = new User(data._id, data.name, data.surname, data.email)); the log is still the same. What do I need to log in order to get the object the view in binding to?

Günter Zöchbauer Over a year ago

There is another mistake I missed. ` console.log(this.user);` is executed before the HTTP request is made. this.http.get() is async, which means the task is enqueued in the browser event queue for later execution, then JS execution is continued (with your log command). When the HTTP call is done, the callback passed to .subscribe(...) is executed, but that's much later. Move the log call into subscribe((user: User) => { ... });

Collectives™ on Stack Overflow

Angular2 HTTP GET - Cast response into full object

3 Answers 3

8 Comments

4 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related