2017-08-01 170 views
3

我执行NG2在我的user.service.ts调用REST服务,并返回JSON这样的:如何动态地将json响应对象映射到实体?

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

返回的对象是这样的:

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

我需要转换这为它看起来像这样我的NG2用户实体:

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

我想这样做的,我可以利用作为图案的最通用的方法。例如,像:

var user = userResponse.map(User); 

我想这让映射自动发生,而不需要任何额外的明确codng使用反射或类似的动态技术。在ng2中做什么是一个好方法?

回答

1

根据意见,似乎要避免构造在你的班级。那么,“最简单的”这里的解决方案是使用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() 
} 

现在你的数据是User一个实例。

演示:http://plnkr.co/edit/Gzi6tjZzTizDhlMCD1y9?p=preview(检查控制台)

+0

完美答案谢谢! – user8334943

+0

太棒了!很高兴在这里,这是一个合适的解决方案!祝你有美好的一天,快乐的编码! :) – Alex

0

当你声明你的类,你可以添加一个构造函数,将建立正确的类:

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

退房this plunker看到它在行动。

设置和重置动态,你可以创建一个方法:

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

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

谢谢z。我希望有更多动态的东西。例如,我希望能够做到这一点,而无需在构造函数或其他地方显式设置类属性 – user8334943

+0

这是可能的,但绝对不是最好的结构方法之一。您需要创建一个方法(如构造函数),然后使用var和obj调用该方法。如果您希望 –

+0

谢谢z,我可以更新答案。你会不会发布你想要的备用解决方案? – user8334943

0

从您的JSON对象通过他们获取属性键,然后循环和名字将它们分配给对象的属性。

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

或者像你这样的可重复使用的功能要求:

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; 
} 

我从来没有写过打字稿之前,所以我在这里给我最好的猜测。希望这足以让你开始。

0

在我的项目,我用可观察的,而不是承诺,我的代码是一样

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

如果一个承诺是需要

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