如何使用不同屬性名稱的json對象的可觀察地圖集合

Question

我有一個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); 
    } 

我想爲我的SE服務返回此

[{"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"}] 

任何幫助，將不勝感激。謝謝。

Answer 1

你可以像這樣的數據映射到類：

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

這應該做你想要什麼。希望這可以幫助！ :)

Answer 2

我建議創建的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; 
    } 
} 

Answer 3

可能更容易改變你的服務，這樣的事情：

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

打字稿將強制返回觀察到有，因爲界面的正確格式的數據，現在你不必處理類或構造函數。