title: Angular HttpModule map json to entity list
body: <p>I have an angular 5 application which retrieves user events data form a REST API. See blow angular code:</p>
  
  <p><strong>Service</strong></p>
  
  <pre><code>/** GET user events from the server */
    getCalendarEvents(): Observable&lt;UserEvents[]&gt; {
      return this.http.get&lt;UserEvents[]&gt;(this.apiUrl + '/user_events')
      .pipe(
        tap(items =&gt; console.log(items)),
        catchError(this.handleError('getEvents', []))
      );
    }
  </code></pre>
  
  <p><strong>Component</strong></p>
  
  <pre><code>userEventsList: UserEvents[] = [];
  
  getCalendarEvents(): void {
      this.calendarService.getCalendarEvents()
        .subscribe(data =&gt; {
          // console.log(data[0].user.FullName);    
          this.userEventsList = data;
        });
    }
  </code></pre>
  
  <p><strong>UserEvents</strong> interfaces:</p>
  
  <pre><code>export interface UserEvents {
      user: User;
      bookings: Event[];
  }
  
  export interface User{
      Id: string;
      FullName: string;
      Email: string;
  }
  
  export interface Event {
      Id: string;
      StartTime: string;
      EndTime: string;
      Description: string;
  }
  </code></pre>
  
  <p><strong>API response</strong></p>
  
  <pre><code>[
      {
          "User": {
              "Id": "123abc",
              "FullName": "First Person",
              "Email": "first.person@example.com"
          },
          "Events": [
          {
              "Id": "eventId-1",
              "StartTime": "2018-01-01T00:00:00",
              "EndTime": "2018-01-01T00:00:00",
              "Description": "Event 1"
          },
          {
              "Id": "eventId-2",
              "StartTime": "2019-01-01T00:00:00",
              "EndTime": "2019-01-01T00:00:00",
              "Description": "Event 2"
          }]
      },
      {
          "User": {
              "Id": "user2",
              "FullName": "Second user",
              "Email": "second.user@example.com"
          },
          "Events": []
      },
      .
      .
      .
  ]
  </code></pre>
  
  <p>The problem is that the returned entity 'UserEvents[]' is not filled up. 
  In the component when trying to access to the object user -> console.log(data[0].user.FullName), an error is produced indicating that it doesn't exist.</p>
  
  <p>It seems that <code>HttpClient</code> module didn't manage to map correctly the entity.</p>
  
  <p>In the angular guide for <a href="https://angular.io/guide/http" rel="nofollow noreferrer">httpclient module</a> it is explained how to specify the entity type in order to return plain entities. 
  In my case it is a more complex entity formed by other entities and maybe that's the point?</p>
  
  <p>Am I missing anything? Do I have it to map the entity by myself?</p>
  
  <p>Thank you for your help :) </p>