Can't map HTTP response to Interface - angularjs

Question

The following code returns on Chrome console: ERROR TypeError: t.json(...).map is not a function The ng serve -prod and ng test --sm=false runs fine.
I want to map the result to the model in Interface, and output them in HTML.
....
export interface UsersData {
_id: number;
email: string;
fullName: string;
}
export class RetrieveUsrData {
private issuesUrl = 'http://localhost:4000/users';
getUserDetails(): Observable<UsersData[]> {
return this.http.get(this.issuesUrl)
.map(this.extractData)
}
extractData(result: Response): UsersData[] {
console.log(JSON.stringify( result.json()) );
return result.json().map(usr => {
return {
_id: usr.message._id,
email: usr.message.email,
fullName: usr.message.fullName
}
}).subscribe(result => result = result);
}
constructor(private http: Http) {}
}
...
I have been checking in few issues e.g. mapping a HTTP response to a JSON and then mapping the JSON to a model, and changed my code/method to:
extractData(result: Response): UsersData[] {
return result.json().map(res => ({
_id:res.message._id,
email:res.message.email,
fullName:res.message.fullName
}) as UsersData)
.subscribe(result => result = result); ;
}
but I keep getting the same error.

Answer 1

The .map method is available on arrays, not objects.
The most likely cause of your error is that if you have a response like this:
{
someKey: [1, 2, 3, 4]
}
You will need to use:
result.json().someKey.map( //...
And you may even be able to simply use the following if the JSON actually adheres to your interface:
return <UsersData[]>result.json().someKey;