How to map an angular 2 class from an http call

Question

I'm new in Angular. I've a class called User:

export class User {
  private id: number;
  private name: string;
  private surname: string;

  get Id(): number {
    return this.id;
  }
  set Id(newId: number) {
    this.id = newId;
  }

  get Name(): string {
    return this.name;
  }
  set Name(newName: string) {
    this.name = newName;
  }

  get Surname(): string {
    return this.surname;
  }
  set Surname(newSurname: string) {
    this.surname = newSurname;
  }
}

...a function to retrive an array of user:

  getValues() {
    this.usersService.getUsers()
      .subscribe((users: User[]) => this.dataSource = users);
  }

and a method to retrive the users array from backend WebApi:

getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.usersSearchUrl)
      .pipe(
      tap(users => this.log(`fetched users`)),
      catchError(this.handleError('getUsers', []))
      );
  }

finally the json returned from the webapi:

[{"id":"1","name":"Alberico","surname":"Gauss"},{"id":"2","name":"Anassimandro","surname":"Dirac"},{"id":"3","name":"Antongiulio","surname":"Poisson"}]

I would have expected that the call would automatically mapped the User class, instead it only gives me an array of type User, in fact if I write something in my component .subscribe((utenti: Utente[]) => console.log(utenti[0].Surname)); the console writes me "undefined". Can you tell me where I'm wrong? Thanks

i only asked as the question states angular 2 yet the http client came in angular 4 — mast3rd3mon, Mar 21 '18 at 09:53
By "Angular 2" the OP means "Angular". I do it all the time. — Nathan Cooper, Mar 21 '18 at 09:54
as for the question in the post, you should only get an array of type `User` as thats what you tell it to do — mast3rd3mon, Mar 21 '18 at 09:55
I'm using HttpClient. Sorry but if the call really returned me an array of type User, then if I delete any property of the class, automatically I should not see it in my component, but it is not so ... — user8253442, Mar 21 '18 at 10:03
Looks to be a duplicate question to this one: https://stackoverflow.com/questions/22875636/how-do-i-cast-a-json-object-to-a-typescript-class — rmcsharry, Mar 21 '18 at 10:09
Possible duplicate of [How do I cast a JSON object to a typescript class](https://stackoverflow.com/questions/22875636/how-do-i-cast-a-json-object-to-a-typescript-class) — Igor, Mar 21 '18 at 11:38

score 3 · Answer 1 · edited Mar 21 '18 at 15:25

3

You are retrieving JSON from your backend, as is expected. A Javascript (or typescript) class is not the same thing.

When the JSON is returned, it can be automatically converted into a simple JSON object in Javascript but it will NOT include all your getters and setters. So these class methods are not available, which is why you get undefined.

Remove all the getters and setters and add a constructor. Then you can just call Surname directly as a property and it will return the value (since it will then just be a plain JSON object).

export class User {
  constructor() {
  }

  public id: number;
  public name: string;
  public surname: string;
}

Or without a constructor, and just declare the properties directly:

export class User {    
  public id: number;
  public name: string;
  public surname: string;
}

Or you could also use an interface:

export interface User {   
  id: number;
  name: string;
  surname: string;
}

You can read more about this issue here and here.

edited Mar 21 '18 at 15:25

Igor

60,821
10
100
175

answered Mar 21 '18 at 10:02

rmcsharry

5,363
6
65
108

1) You can't specify an access modifier on a field on an interface. 2) For the purposes of your examples it would also be best to remove the `private` access modifier on the class members as well otherwise you could never access them from outside which is what you are describing the OP should do. – Igor Mar 21 '18 at 14:48
1

See my last change, you can't put an access modifier on the members of an interface. An interface represents a contract and nothing in the contract can be marked as private otherwise what would be the point. If you do put an access modifier on a member of an interface the typescript transpiler will show an error. Now it all looks good (+1 from me). – Igor Mar 21 '18 at 15:33
@Igot Thanks again...was too busy elsewhere to give this my proper attention. – rmcsharry Mar 21 '18 at 16:08

score -2 · Accepted Answer · answered Mar 21 '18 at 09:58

I think in component ts use like this code:

 users: User[];
  constructor(
    private us: usersService,
    public auths: AuthService
  )

    this.us.getUsers.subscribe(
      users=> {
        this.users= users.map((user) => {
          return new User(user);
        });
      }
    );

In service I think to write:

  public getUsers(): Observable<User[]> {

    let headers = new Headers();
    headers.append('x-access-token', this.auth.getCurrentUser().token);

    return this.http.get(Api.getUrl(Api.URLS.getUsers), {
      headers: headers
    })
      .map((response: Response) => {
        let res = response.json();

        if (res.StatusCode === 1) {
          this.auth.logout();
        } else {
          return res.StatusDescription.map(user=> {
            return new User(user);
          });
        }
      });
  }

For me this logic work perfect. I hope to help you with this code

How to map an angular 2 class from an http call

2 Answers2