如何使用不同属性名称的json对象的可观察地图集合

时间:2017-02-15 17:25:14

标签: angular typescript

我有一个json结果,它是一个对象的集合。我需要将它们转换为自定义对象的集合,这些对象具有与json结果不同的属性名称。此例中也不需要所有结果属性。

JSON

[{"empID":"12345", "formattedName":"Simpson, Homer"},
 {"empID":"24680", "formattedName":"Simpson, Marge"},
 {"empID":"36912", "formattedName":"Simpson, Bart"},
 {"empID":"13579", "formattedName":"Simpson, Lisa"},
 {"empID":"13579", "formattedName":"Simpson, Lisa"}]

我的自定义Ojbect

export class multiSelect {
   constructor(
    public id: string,
    public name: string
  ) {  }
}

服务

  reportsTo(): Observable<multiSelect> {
    return this._http.get('getCollection')
      .map((response: Response) => response.json())
      .map(({empID, formattedName}) => new multiSelect(empID, formattedName))
      .catch(this.handleError);
  }

我希望我的服务能够返回

[{"id":"12345", "name":"Simpson, Homer"},
 {"id":"24680", "name":"Simpson, Marge"},
 {"id":"36912", "name":"Simpson, Bart"},
 {"id":"13579", "name":"Simpson, Lisa"},
 {"id":"13579", "name":"Simpson, Lisa"}]

任何帮助将不胜感激。感谢。

3 个答案:

答案 0 :(得分:3)

您可以将数据映射到您的班级,如下所示:

reportsTo() {
  return this._http.get('getCollection')
    .map((response: Response) => response.json().map(res => new multiSelect(res.empID, res.formattedName)))
    .catch(this.handleError);
  }

那应该做你想要的。希望这可以帮助! :)

答案 1 :(得分:0)

我建议在multiSelect类中创建一个方法:

export class multiSelect {
   constructor(
    public id: string,
    public name: string
  ) {  }
  fillWithData(data){ //this function receive your json
       this.id = data.empID;
       this.name = data.formattedName;
  }
}

然后,JSON.strigify(multiSelectInstance)可以解决问题。

如果您想继续使用构造函数,那么您只需要一个调用就可以进行以下操作:

export class multiSelect {
   constructor(
    public id: string,
    public name: string,
    public data
  ) { 
       this.id = data.empID;
       this.name = data.formattedName;
   }
  fillWithData(data){ //this function receive your json
       this.id = data.empID;
       this.name = data.formattedName;
  }
}

答案 2 :(得分:0)

将服务更改为以下内容可能更容易:

reportsTo(): Observable<multiSelect> {
  return this._http.get('getCollection')
    .map((response: Response) => response.json())
    .map(({empID, formattedName}) => ({id: empID, name: formattedName}))
    .catch(this.handleError);
}

然后摆脱你的multiSelect类,而不是用接口替换它。

export interface multiSelect {
  id: string;
  name: string;
}

由于接口,Typescript将强制返回的observable具有正确格式的数据,现在您不必处理类或构造函数。