title: Why This Works on HTTP but not in HTTPClient?
body: <p>I'm new to programming. So, I have an API service which has get method sending data in JSON like this</p>
  
  <pre><code>{ "records" : [
          {
              "id" : "1",
              "name" : "aa"
          },
          {
              "id" : "2",
              "name" : "bb"
          },
          ...
      ]
  }
  </code></pre>
  
  <p>I'm trying to get data to my project using angular CLI. Here is inside every File</p>
  
  <pre><code>//name.ts
  export interface Name {
      id: number;
      name: string;
  }
  
  //name.service.ts
  ...
  constructor(private _http: Http) { }
  
  getName(): Observable&lt;Name[]&gt; {
      return this._http.get(this._url).pipe(map((res: Response) =&gt; res.json()));
  }
  ...
  
  //app.component.ts
  ...
  names: Name[];
  
  constructor(private _nameService: nameService) { }
  
  ngOnInit() {
      this._nameService.getName().subscribe(data =&gt; this.names = data['records']);
  }
  </code></pre>
  
  <p>This is working fine. But, if I'm using HttpClient module, and change <code>getName()</code> function inside <code>name.service.ts</code> to this:</p>
  
  <pre><code>//name.service.ts after getName() change
  ...
  constructor(private _http: HttpClient) { }
  
  getName(): Observable&lt;Name[]&gt; {
      return this._http.get&lt;Name[]&gt;(this._url);
  }
  ...
  </code></pre>
  
  <p>Suddenly I got empty list. What did I do wrong? Should I get rid of <code>&lt;Name[]&gt;</code> so it became <code>return this._http.get(this._url);</code>? But, it would raise an error and can't be compiled.</p>