title: Observable from JSON response
body: <p>I am learning Angular (version 8) and stuck with RxJS. Precisely, I am unable to read a particular key from an Observable.</p>
  
  <p>Here is my <strong>User</strong> interface:</p>
  
  <pre><code>export interface User {
    id: Number;
    email: String;
    first_name: String;
    last_name: String;
    avatar: String;
  }
  </code></pre>
  
  <p>Then in <strong>users.service.ts</strong>, I have a method called <code>getUsers()</code>which receives data from an API call (<a href="https://reqres.in/api/users" rel="nofollow noreferrer">https://reqres.in/api/users</a>). The response JSON looks like this: </p>
  
  <pre><code>{
  page: 1,
  per_page: 6,
  total: 12,
  total_pages: 2,
  data: [
  {
  id: 1,
  email: "george.bluth@reqres.in",
  first_name: "George",
  last_name: "Bluth",
  avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"
  },
  {
  id: 2,
  email: "janet.weaver@reqres.in",
  first_name: "Janet",
  last_name: "Weaver",
  avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"
  },
  {
  id: 3,
  email: "emma.wong@reqres.in",
  first_name: "Emma",
  last_name: "Wong",
  avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg"
  },
  {
  id: 4,
  email: "eve.holt@reqres.in",
  first_name: "Eve",
  last_name: "Holt",
  avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"
  },
  {
  id: 5,
  email: "charles.morris@reqres.in",
  first_name: "Charles",
  last_name: "Morris",
  avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg"
  },
  {
  id: 6,
  email: "tracey.ramos@reqres.in",
  first_name: "Tracey",
  last_name: "Ramos",
  avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg"
  }
  ]
  }
  </code></pre>
  
  <p>The <strong>users.service.ts</strong> file looks like this: </p>
  
  <pre><code>import { Injectable } from "@angular/core";
  import { HttpClient, HttpHeaders } from "@angular/common/http";
  import { Observable } from "rxjs";
  
  import { User } from "../models/user";
  
  const httpOptions = {
    headers: new HttpHeaders({ "Content-Type": "applicaiton/json" })
  };
  
  @Injectable({
    providedIn: "root"
  })
  export class UsersService {
    private getUsersUrl: string = "https://reqres.in/api/users";
    constructor(private http: HttpClient) {}
  
    // We have casted the observable into an array of type User
    getUsers(): Observable&lt;User[]&gt; {
      return this.http.get&lt;User[]&gt;(this.getUsersUrl);
    }
  }
  </code></pre>
  
  <p>The Observable returns the entire JSON response. I am trying to read the users array from this response in my component. </p>
  
  <pre><code>ngOnInit() {
      this.loaded = false;
      setTimeout(() =&gt; {
        this.usersService.getUsers().subscribe(cards =&gt; {
          // How do I read the "data" key in cards?
          this.users = cards.data; /* Error */
          this.loaded = true;
          console.log(this.users);
        });
      }, 2000);
    }
  </code></pre>
  
  <p>Getting the following error: </p>
  
  <p><strong>ERROR in src/app/components/main/main.component.ts(21,28): error TS2339: Property 'data' does not exist on type 'User[]'.</strong> [Makes sense as it is not defined in the User interface]</p>
  
  <p>If I change <code>this.users = cards.data;</code> to <code>this.users = cards;</code> and then do a console.log, I see the entire JSON response from above. I am trying to display a list of users on my UI.</p>
  
  <p>Please advise. </p>