As a Map Response object returned by the Http service for TypeScript objects using the Observable Map function in Angular2

Question

Hi, I created an angular2 service whose task is to call webapi, which returns data in the structure of a json object as follows:

//Result of the webapi service call. { "Total":11, "Data":[{"Id":1,"Name":"A","StartDate":"2016-01-01T00:00:00"}, {"Id":2,"Name":"B","StartDate":"2016-02-01T00:00:00"}] } 

Here is my angular2 service. The getMileStones methods work fine, and I can cast the answer back to MileStone []. But in order to get the paged data, I created a function getPagedMileStones (int, int), which calls the webapi method and returns the result, as described above. Structure. I want to cast the returned response from webapi to IPagedResponse. But I can not get it to work properly. I have an IPagedResponse interface and I want this function to return this information back to the calling component so that I can provide swap functionality.

  import { MileStoneModel} from './milestoneModel' import { Http, Response, Headers, RequestOptions } from '@angular/http' import { Injectable } from '@angular/core' import { Observable } from 'rxjs/Observable'; import {PaginatePipe, PaginationService, PaginationControlsCmp, IPaginationInstance} from 'ng2-pagination'; import 'rxjs/Rx'; export interface IPagedResponse<T> { total: number; data: T[]; } export interface DataModel { id: number; data: string; } @Injectable() export class MileStoneService //implements IPagedResponse<MileStoneModel> { data: MileStoneModel[]; //private _page: number = 1; total: number; private pagedResult: IPagedResponse<MileStoneModel>; mileStones: MileStoneModel[] private url: string = "http://localhost/ControlSubmissionApi/api/Milestones"; constructor(private http: Http) { } getMilestones(): Observable< MileStoneModel[]> { return this.http.get(this.url) .map((response: Response) => <MileStoneModel[]>response.json()) .catch(this.handleError); } //----------- Starts here ------------- getTypedPagedMilestones(page: number, pageSize: number) { debugger; return this.http.get(this.url + "/" + page + "/" + pageSize) .map((res: Response) => { this.data = <MileStoneModel[]>res.json().Data; this.total = res.json().Total; }) //.map((Data, Total) => { console.log(Data); console.log(Total); }) .catch(this.handleError); //----------- Ends here ------------ } getMilestone(id: number):Observable< MileStoneModel> { return this.http.get(this.url+"/"+id) .map((response: Response) => <MileStoneModel>response.json()) .catch(this.handleError); } searchMileStones(name: string): Observable<MileStoneModel[]> { let headers = new Headers({ 'Content-Type': 'application/json' }); let options = new RequestOptions({ headers: headers }); return this.http.get(this.url+"/search/"+name) .map((response: Response) => <MileStoneModel[]>response.json()) .catch(this.handleError); } addMileStone(formdata:string) { //let body = JSON.stringify({ newMileStone }); let headers = new Headers({ 'Content-Type': 'application/json' }); let options = new RequestOptions({ headers: headers }); return this.http.post(this.url, formdata, options) .map((response: Response) => <MileStoneModel>response.json()) .catch(this.handleError); } private handleError(error: any) { // In a real world app, we might use a remote logging infrastructure // We'd also dig deeper into the error to get a better message let errMsg = (error.message) ? error.message : error.status ? '${error.status} - ${error.statusText}' : 'Server error'; console.log(errMsg); // log to console instead return Observable.throw(errMsg); } } 

Answer 1

Would it work? I do not see in your code any variable that is of type IPagedResponse

  pageResponse: IPagedResponse<MileStoneModel>; getTypedPagedMilstones(page: number, pageSize: number): Observable<IPagedResponse<MileStoneModel>> { return this.http.get(this.url + "/" + "/" + pageSize) .map((res: Response) => { this.pageResponse.data = <MileStoneModel[]>res.json(); this.pageResponse.total = res.json().Total; }) .catch(this.handleError); } 

Answer 2

 getPagedMilestones(page: number, pageSize: number): Observable<IPagedResponse<MileStoneModel>> { return this.http.get(this.url + "/" + page + "/" + pageSize) .map((response: Response) => { return { data: <MileStoneModel[]>response.json().Data, total: response.json().Total } }) .catch(this.handleError); }