I'm implementing ng2 where my user.service.ts calls a REST service and returns json like this:

getUser(id: number): Promise<User> {
    return this.http.get('http://localhost:4000/users/1')
        .toPromise()
        .then(response => response.json())
}

The returned object looks like this:

{
   "Id":"1"
   "FirstName":"John"
   "LastName":"Smith"
}

I need to convert this into my ng2 user entity which looks like this:

export class User 
{
    Id: number;
    FirstName: string;
    LastName: string;
}

I'd like to do this in the most generic way that I can leverage as a pattern. For example, something like:

var user = userResponse.map(User);

I'd like this to use reflection or similar dynamic technique so the mapping happens automatically without any additional explicit codng needed. What would be a good way to do this in ng2?

I'm implementing ng2 where my user.service.ts calls a REST service and returns json like this:

getUser(id: number): Promise<User> {
    return this.http.get('http://localhost:4000/users/1')
        .toPromise()
        .then(response => response.json())
}

The returned object looks like this:

{
   "Id":"1"
   "FirstName":"John"
   "LastName":"Smith"
}

I need to convert this into my ng2 user entity which looks like this:

export class User 
{
    Id: number;
    FirstName: string;
    LastName: string;
}

I'd like to do this in the most generic way that I can leverage as a pattern. For example, something like:

var user = userResponse.map(User);

I'd like this to use reflection or similar dynamic technique so the mapping happens automatically without any additional explicit codng needed. What would be a good way to do this in ng2?

• javascript
• angular
• typescript

4 Answers 4

Based on ments, seems you want to avoid having constructor in your class. Well, the "simplest" solution here is to use Object.assign():

getUser(id: number): Promise<User> {
  return this.http.get('http://localhost:4000/users/1')
    .map(res => Object.assign(new User(), res.json()))
    .toPromise()
}

Now your data is an instance of User.

Demo: http://plnkr.co/edit/Gzi6tjZzTizDhlMCD1y9?p=preview (check console)

Get the property keys from your json object, then loop through them and assign them to your object's properties by name.

.then(json => {
    Object.keys(json).forEach(key => user[key] = json[key]);
});

Or as a reusable function like you requested:

export class User {
    // properties
    mapResponse(response) {
        Object.keys(response).forEach(key => this[key] = json[key]);
    }
}


getUser(id: number): Promise<User> {
    var user = new User();

    this.http.get('http://localhost:4000/users/1')
        .toPromise()
        .then(response => response.json())
        .then(newUser.mapResponse);

    return user;
}

I have never written TypeScript before so I have given it my best guess here. Hopefully it's enough to get you started.

When you declare your class you can add a constructor which will build the class correctly:

export class User 
{
    Id: number;
    FirstName: string;
    LastName: string;
    constructor(obj: any) {
      this.Id = +obj['Id'];
      this.FirstName = obj['FirstName'];
      this.LastName = obj['LastName'];      
    }
}

Check out this plunker to see it in action.

For setting and resetting dynamically you can create a method:

let user = setUser(this.userResponse); // <-- Assuming this.userResponse is the returned object

setUser(res) {
  return {
    Id: +res['Id'],
    FirstName: res['FirstName'],
    LastName: res['LastName']
  };
}

In my project, I use Observable instead of Promise, and my code is like

getUser(id: number): Observable<User> {
    return this.http.get('http://localhost:4000/users/1')
             .map(resp=>resp.json());
}

If a promise is need

getUser(id: number): Promise<User> {
return this.http.get('http://localhost:4000/users/1')
    .map(resp=>resp.json())
    .toPromise()
}