title: How to Map Response object returned by Http Service to a TypeScript Objects using Observable Map function in Angular2
body: <p>Hi I have created an angular2 service whose task is to call a webapi which returns data in a json object structure as follows:</p>
  
  <pre><code>//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"}]
  }
  </code></pre>
  
  <p>Here is my angular2 service. The getMileStones methods work perfectly
  and I am able to cast the response back to MileStone[] . But In order to get the paged data I have created a function getPagedMileStones(int,int) which call a webapi method and return the result as mentioned above structure .I want to cast the returned response from webapi to IPagedResponse. But I  am not able to make it work properly. I have an Interface IPagedResponse and I want this function to return this information back to the component calling so that I can provide paging functionality.</p>
  
  <pre><code>    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&lt;T&gt; {
          total: number;
          data: T[];
      }
  
      export interface DataModel {
          id: number;
          data: string;
      }
  
      @Injectable()
      export class MileStoneService //implements IPagedResponse&lt;MileStoneModel&gt;
      {
  
          data: MileStoneModel[];
          //private _page: number = 1;
           total: number;
  
          private pagedResult:  IPagedResponse&lt;MileStoneModel&gt;;
  
          mileStones: MileStoneModel[]
          private url: string = "http://localhost/ControlSubmissionApi/api/Milestones";
          constructor(private http: Http) {
  
  
          }
          getMilestones(): Observable&lt; MileStoneModel[]&gt; {
  
              return this.http.get(this.url)
                  .map((response: Response) =&gt; &lt;MileStoneModel[]&gt;response.json())            
                  .catch(this.handleError);
  
  
          }
          //----------- Starts here -------------
          getTypedPagedMilestones(page: number, pageSize: number) {
              debugger;
              return this.http.get(this.url + "/" + page + "/" + pageSize)
                  .map((res: Response) =&gt; { this.data = &lt;MileStoneModel[]&gt;res.json().Data; this.total = res.json().Total; })
                  //.map((Data, Total) =&gt; { console.log(Data); console.log(Total); })
                  .catch(this.handleError);
          //----------- Ends here ------------
  
          }
  
          getMilestone(id: number):Observable&lt; MileStoneModel&gt; {
  
              return this.http.get(this.url+"/"+id)
                  .map((response: Response) =&gt; &lt;MileStoneModel&gt;response.json())
                  .catch(this.handleError);
  
          }
          searchMileStones(name: string): Observable&lt;MileStoneModel[]&gt; {
              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) =&gt; &lt;MileStoneModel[]&gt;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) =&gt; &lt;MileStoneModel&gt;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);
          }
      }
  </code></pre>