When retrieving JSON from an API into an Angular service, I am working with a collection of objects structured like this:
{
"data": {
"id": 1,
"title": "one"
},
"stats" : {
"voteCount": 8
}
}
I am particularly interested in the 'data' part, as I intend to submit it back in a reactive form in Angular. To achieve this, I need the observable to be a collection of objects containing only the id and title:
export class SimpleIssue {
id: number;
title: string;
}
In my Angular service, I retrieve the data using the following method:
getItems(): Observable<SimpleIssue[]> {
return this.http.get(this.apiUrl + 'simpleissues/')
.map((response: Response) => <SimpleIssue[]> response.json())
.do(thedata => console.log('all: ' + JSON.stringify(thedata)))
.catch(this.handleError);
}
I have attempted to modify the response handling by using response.json().data or adding an additional .map like this:
.map(blah => blah.data)
However, these attempts have not been successful. Interestingly, if I import the data as an 'any' type, I can use {{ myItem.data | json }} and retrieve the expected information for each collection object.
Is there a way to address this issue and correctly send different view models for each view, or is there a fundamental concept that I am missing?
Thank you