title: Angular 4 proper way to cast http response
body: <p>I've created a service in Angular 4 and I'm fetching data via REST/JSON (new to Angular) using this code:</p>
  
  <p>Interface</p>
  
  <pre><code>export interface IItem {
      Id: number;
      Title: string;
  }
  </code></pre>
  
  <p>Service</p>
  
  <pre><code>import { IItem } from './item';
  import { Injectable } from '@angular/core';
  import { HttpClient, HttpErrorResponse, HttpHeaders } from '@angular/common/http';
  import { Observable } from 'rxjs/Observable';
  import 'rxjs/add/observable/throw';
  import 'rxjs/add/operator/catch';
  import 'rxjs/add/operator/do';
  import 'rxjs/add/operator/map';
  
  @Injectable()
  export class ItemTest {
  
      constructor(private _http: HttpClient) {}
  
      getItems(): Observable&lt;IItem[]&gt; {
          return this._http.get&lt;IItem[]&gt;('url')
              .do(data =&gt; {
                  console.log(data);
              })
      }
  }
  </code></pre>
  
  <p>The http cast to IITem works fine if the response is in this format</p>
  
  <pre><code>[
      {
          "Id": 53,
          "Title": "Test Document 4.docx"
      },
      {
          "Id": 55,
          "Title": "Test Document 2.docx"
      }
  ]
  </code></pre>
  
  <p>But the actual response from the server looks like this and the cast doesn't work.  What's the best way to cast the "results" portion of the response to an array of IItems?</p>
  
  <pre><code>{
      "d": {
          "results": [
              {
                  "Id": 53,
                  "Title": "Test Document 4.docx"
              },
              {
                  "Id": 55,
                  "Title": "Test Document 2.docx"
              }
          ]
      }
  }
  </code></pre>