title: Angular2 define json observable return type to interface or class model
body: <p>I wish to have my json api response to be hydrated into a class or based on a interface so I always know what attributes I have.
  I have the following JSON:</p>
  
  <pre><code>{
    "users": [
      {
        "id": "bd3d70fd-03f7-4f5e-9ac1-4cb7221e352d",
        "username": "caroga",
        "username_canonical": "caroga",
        "email": "caroga@caroga.net",
        "email_canonical": "caroga@caroga.net",
        "groups": [],
        "roles": [],
        "games": [],
        "_links": {
          "self": {
            "href": "/app_dev.php/api/users/bd3d70fd-03f7-4f5e-9ac1-4cb7221e352d"
          },
          "users": {
            "href": "/app_dev.php/api/users/"
          }
        }
      },
      {
        "id": "df33d9cb-b575-427f-b2bd-ed9c364110f7",
        "username": "joemi",
        "username_canonical": "joemi",
        "email": "joemi@joemi.nl",
        "email_canonical": "joemi@joemi.nl",
        "roles": [],
        "games": [],
        "_links": {
          "self": {
            "href": "/app_dev.php/api/users/df33d9cb-b575-427f-b2bd-ed9c364110f7"
          },
          "users": {
            "href": "/app_dev.php/api/users/"
          }
        }
      }
    ],
    "count": 2
  }
  </code></pre>
  
  <p>And the following interface and model:</p>
  
  <p><code>Users.ts</code></p>
  
  <pre><code>import {User} from "../User";
  export interface Users{
      count: number,
      users: Array&lt;User&gt;,
  }
  </code></pre>
  
  <p><code>User.ts</code></p>
  
  <pre><code>export class User {
      id: string;
      username: string;
      username_canonical: string;
      email: string;
      email_canonical: string;
      groups: Array&lt;string&gt;;
      roles: Array&lt;string&gt;;
      games: Array&lt;string&gt;;
  
      constructor(values: Object = {}) {
          Object.assign(this, values);
      }
  }
  </code></pre>
  
  <p><code>user-data.service.ts</code></p>
  
  <pre><code>import {Injectable} from "@angular/core";
  import {Http} from "@angular/http";
  import {ApiService} from "./api.service";
  import {environment} from "../../environments/environment";
  import {Observable} from "rxjs";
  import {Users} from "../Models/Interfaces/Users";
  
  @Injectable()
  export class UserDataService extends ApiService {
  
      constructor(private http: Http) {
          super();
      }
  
      getAllPlayers(): Observable&lt;Users&gt; {
          return this.http.get(environment.apiUrl + '/users/', this.addJwtHeader())
              .map(result =&gt; result.json());
      }
  }
  </code></pre>
  
  <p><code>users.component.ts</code></p>
  
  <pre><code>import {Component, OnInit} from "@angular/core";
  import {UserDataService} from "../../services/user-data.service";
  import {User} from "../../Models/User";
  import {Observable} from "rxjs";
  import {Users} from "../../Models/Interfaces/Users";
  
  @Component({
      selector: 'app-users',
      templateUrl: './users.component.html',
      styleUrls: ['./users.component.css']
  })
  export class UsersComponent implements OnInit {
  
      private users: User[];
  
      constructor(private PlayerDataService: UserDataService) {
      }
  
      ngOnInit(): void {
          this.getListOfAllUsers().subscribe(users =&gt; {
              console.log(users);
              this.users = users.users;
          });
      }
  
      public getListOfAllUsers(): Observable&lt;Users&gt; {
          return this.PlayerDataService.getAllPlayers();
      }
  }
  </code></pre>
  
  <p><code>users.component.html</code></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li *ngFor="let user of users"&gt;
          {{ user.username }}
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The issue at hand:
  Although I am getting results on screen, it's still using the json parameters instead of the ones defined in the model. 
  I noticed this as changing the <code>username</code> attribute in <code>User.ts</code> doesn't throw an error or even reflect in my object in the console.
  Basically I expected that <code>private users: User[];</code> would be a array of User objects, but it's not.
  <a href="https://i.stack.imgur.com/Lbrhd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Lbrhd.png" alt="Console log of response array"></a></p>
  
  <p>What am I doing wrong here?</p>