title: Angular 6: how to subscribe data of particular json response key
body: <p>I'm using <code>Angular 6</code>.</p>
  
  <p>I have a <strong>contact-list.components.ts</strong> to retrieve contacts list from the server which returns data in following JSON format.</p>
  
  <pre><code>{
      "count": 1,
      "next": null,
      "previous": null,
      "results": [
          {
              "id": "9ab849a7-25c4-41df-9ac2-f9a122eed1ad",
              "first_name": "Anshuman",
              "last_name": "Upadhyay",
              ...
              "phone_numbers": [
                  {
                      "id": "0bf22da0-b880-431b-b863-c10dac6c1ea9",
                      "phone": "9718996135",
                      ...
                  }
              ],
              "emails": [
                  {
                      "id": "16538e03-3257-4ac6-acfc-23e7c25757b9",
                      "email": "sushilphp85@gmail.com",
                      ...
                  }
              ],
              "address": [
                  {
                      "id": "54ad72b5-c570-4ea0-83ce-edf162b68f23",
                      "line_1": "Nirala",
                      ...
                      "state": {
                          "id": "e9e85f3b-bf2b-46e6-9209-4548bf619c83",
                          "name": "Uttar Pradesh",
                          ...
                          "country": {
                              "id": "6305ea1d-674b-470f-b1b9-31f46ca2bbec",
                              "name": "India",
                              ...
                          }
                      }
                  }
              ]
          }
      ]
  }
  </code></pre>
  
  <p>I have defined a <strong>contact.model.ts</strong></p>
  
  <pre><code>export class Contact {
    id: string;
    first_name: string;
    last_name: string;
    full_name: string;
    gender: string;
    date_of_birth: string;
    avatar: string;
    primary_phone: string;
    primary_email: string;
    created: string;
    modified: string;
  }
  </code></pre>
  
  <p>and <strong>contacts.component.ts</strong> as</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {ContactService} from '../contact.service';
  import {Contact} from '../contact.model';
  
  @Component({
    selector: 'app-contact-list',
    templateUrl: './contact-list.component.html',
    styleUrls: ['./contact-list.component.css']
  })
  export class ContactListComponent implements OnInit {
  
    contacts: Contact[];
  
    constructor(
      private contactService: ContactService
    ) { }
  
    ngOnInit() {
      this.getContacts();
    }
  
    getContacts(): void {
      this.contactService.getContacts().subscribe(
        contacts =&gt; this.contacts = contacts
      );
      console.log(this.contacts);    // prints undefined
    }
  
  }
  </code></pre>
  
  <p>and the content of <strong>contact.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import {HttpClient} from '@angular/common/http';
  import {Observable, of} from 'rxjs';
  import {Contact} from './contact.model';
  import {catchError} from 'rxjs/operators';
  import {ResourceProviderService} from '../resource-provider.service';
  import {AuthService} from '../auth/auth.service';
  
  @Injectable({
    providedIn: 'root'
  })
  export class ContactService {
  
    private contactUrl = '/api/contacts/';
  
    private static log(message: string) {
      console.log(`ContactService: ${message}`);
    }
  
    constructor(
      private http: HttpClient,
      private resource: ResourceProviderService,
      private auth: AuthService
    ) { }
  
    getContacts(): Observable&lt;Contact[]&gt; {
      const url = this.resource.url + this.contactUrl;
  
      return this.http.get&lt;Contact[]&gt;(url)
        .pipe(
          catchError(this.handleError('getContacts', []))
        );
    }
  
    private handleError&lt;T&gt; (operation = 'operation', result?: T) {
      return (error: any): Observable&lt;T&gt; =&gt; {
        // TODO: send the error to remote logging infrastructure
        console.error(error);
  
        // TODO: better job of transforming error for user consumption
        ContactService.log(`${operation} failed: ${error.message}`);
  
        // Let the app keep running by returning an empty result.
        return of(result as T);
      };
    }
  }
  </code></pre>
  
  <p>The JSON response is there in the network tab in the request URL of <code>getContacts()</code> but not able to save the returned data into <code>this.contact</code>.</p>
  
  <p><strong>How can I set returned JSON data in the Contacts class object?</strong></p>