Angular 2 map http response to instance of class

Question

I'm wondering what the best way is to map the http response from a get request to a class instead of a basic Javascript object.

In my current attempt I simple do new ClassName(data), but there might an obscure Angular specify and completely awesome way to do this that I don't know.

Here's my current code:

getPost(id:number){
    return this._http.get(this._postsUrl+'/'+id)
                .map(res => new Post(res.json().data))
                .do(data => console.log(data))
                .catch(this.handleError);
}

I need Post to be a class and not just an interface because I have methods inside.

I followed the HeroTutorial and the http "developer guide" along and in their getHeroes method they do:

getHeroes () {
return this.http.get(this._heroesUrl)
                .map(res => <Hero[]> res.json().data)
                .catch(this.handleError);
}

I somehow expected the <Hero[]> part to do just that: Take the Hero class and create new instances of it, but my tests show that it doesn't, this is pretty much just for Typescript to know what to expect.

Any ideas ? Thanks!

Answer 1

I think that you could use the map method of JavaScript objects:

getHeroes () {
  return this.http.get(this._heroesUrl)
            .map(res => {
               return res.json().data.map((elt) => {
                 // Use elt to create an instance of Hero
                 return new Hero(...);
               });
             })
            .catch(this.handleError);
}

Answer 2

By setting the prototype on the object being returned I was able to get an instance of my class.

getHero () {
      return this.http.get(this._heroUrl)
            .map(response => {
                    let res = <Hero> response.json();
                    Object.setPrototypeOf(res, Hero.prototype);
                    return res;
                   })
            .catch(this.handleError);
}

My class was very simple with a parameterless constructor so this worked for me. For more complex classes I don't know if this would work.

Note: the above code is for getHero() not getHeroes(). I would assume I could do the same thing with a list by setting the prototype on each item in the array but I haven't tried/confirmed that.

Reference: I got the idea for this from this post by BMiner

Answer 3

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

getHeroes(): Observable<Hero[]> {return this.http.get<Hero[]>({url}, {options});}

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