I have a class:
export class Items {
id: string;
itemName: string;
}
Previously, when using Angular version less than 4.3, I had this method:
getItems(): Observable<Items[]> {
return this.http.get('api-url-here/items')
.map((data: Response) => {
return data.json()
.map((item: any) => {
return {
id: item.id,
itemName: item.itemName
};
});
})
}
After upgrading to Angular version 4.3 or above, the method was updated to:
getItems(): Observable<Items[]> {
return this.http.get<Items[]>('api-url-here/items')
.map((data: any) => {
return data
.map((item: any) => {
return {
id: item.id,
itemName: item.itemName
};
});
})
}
The response from the API now looks like this:
[
{"id":1,"itemName": "item name" }
]
https://i.sstatic.net/WmLPn.png
Looking at the updated code examples above, such double mapping is required to shape the data into the desired type. Is there a more efficient approach to accomplish this using Angular 4.3 or newer versions?