title: How to make an HTTP get() on a local json file using rxjs?
body: <p>I am trying to make a request to my local JSON file using Ionic typescript, and retrieve all of the game objects in my JSON file. Here is what I have so far:</p>
  
  <pre><code>import { HttpClient } from '@angular/common/http';
  import { Injectable } from '@angular/core';
  import { map } from 'rxjs/operators/map';
  import { catchError } from 'rxjs/operators/catchError';
  import { Observable } from "rxjs/Observable";
  import { Game } from "../../models/Game";
  
  import { Http, Response, RequestOptions, Headers } from '@angular/http';
  
  /*
    Generated class for the GamesProvider provider.
  
    See https://angular.io/guide/dependency-injection for more info on providers
    and Angular DI.
  */
  @Injectable()
  export class GamesProvider {
    constructor(public http: HttpClient) {
  
    }
  
    public getGames(): Observable&lt;Array&lt;Game&gt;&gt; {
  
        return this.http.get('/assets/games.json').pipe(
          map((res: Response) =&gt; res.json().games),
          catchError(this.handleError)
        );
    }
  
    public handleError(error: any) {
        // log error
        // could be something more sofisticated
        let errorMsg = error.message || `Yikes! There was a problem with our hyperdrive device and we couldn't retrieve your data!`
        console.error(errorMsg);
  
        // throw an application level error
        return Observable.throw(errorMsg);
    }
  }
  </code></pre>
  
  <p>I am getting a result that looks like this when I call the getGames() function:</p>
  
  <pre><code>operator
      :CatchOperator {caught: Observable, selector: ƒ}
      source
      :Observable {_isScalar: false, source: Observable, operator: MapOperator}
      _isScalar
      :false
      __proto__
      :Object
  </code></pre>
  
  <p>What I am expecting is an Observable Array of Game objects.</p>
  
  <p>Game.ts:</p>
  
  <pre><code>export class Game {
      gameid: number
      genres: string
      images: string
      name: string
      developer: string
      publisher: string
      date: string
      description: string
      players: number
  }
  </code></pre>
  
  <p>This is what my JSON file looks like:</p>
  
  <pre><code>{
      "games":[
    {
      "Id": 1,
      "name": "007: GoldenEye",
      "genres": "Action/First-Person Shooter",
      "date": "25-Aug-97",
      "images": "007: GoldenEye.png",
      "developer": "Rare",
      "publisher": "Nintendo",
      "description": "A video game released for the Nintendo 64.",
      "players": 4
    },
    {
      "Id": 2,
      "name": "007: The World Is Not Enough",
      "genres": "Action/First-Person Shooter",
      "date": "1-Nov-00",
      "images": "007: The World Is Not Enough.png",
      "developer": "Eurocom",
      "publisher": "Electronic Arts",
      "description": "A video game released for the Nintendo 64.",
      "players": 4
    },
  ...
  ...
  ...
   ]
  }
  </code></pre>