title: Parse/map Angular 7 API response to model class
body: <p>I am new to Angular. Please excuse if anything is trivially missed by me.</p>
  
  <p>I am trying to make an API call. For this I have created a base service class named base.service.ts (needed code below) -</p>
  
  <pre><code>public get(path: string, params: HttpParams = new HttpParams()): Observable&lt;any&gt; {
      return this.httpClient.get(BASE_URL + path, { params }).pipe(catchError(this.formatErrors));
  }
  </code></pre>
  
  <p>I have also created a new service class named visitor.service.ts from where I call the base service's get method as below -</p>
  
  <pre><code>export class VisitorService {
  
    constructor(private baseService: BaseService) { }
  
      getVisitors(): Observable&lt;Visitor[]&gt; {
          return this.baseService.get(String.Format(Globals.endpoints.visitors));
      }
  }
  </code></pre>
  
  <p>From my component class named dashboard.component.ts I load this visitors list -</p>
  
  <pre><code>export class DashboardComponent implements OnInit {
  
    constructor(private visitorService: VisitorService) { }
  
    ngOnInit() {
      this.loadTodaysVisitors();
    }
  
    private loadTodaysVisitors() {
  
      this.visitorService.getVisitors().subscribe(
        data =&gt; {
          console.log(data)
        }
      );
    }
  }
  </code></pre>
  
  <p>My first question is - when I run this code, I do not see anything logged on the console. Why?</p>
  
  <p>Also, my response will be in the following format -</p>
  
  <pre><code>[
      {
          "visitor": {
              "attendeeFirstName": "ABC",
              "attendeeSurname": "XYZ",
          },
          "visitorcheckin": [
              {
                  "field": value,
                  "field1": value1,
              },{
                  "field": value,
                  "field1": value1,
              }
          ],
          "visitorcheckout": [
              {
                  "field": value,
                  "field1": value1,
              },{
                  "field": value,
                  "field1": value1,
              }
          ]
      },
      {
          "visitor": {
              "attendeeFirstName": "DEF",
              "attendeeSurname": "PQR",
          },
          "visitorcheckin": [
              {
                  "field": value,
                  "field1": value1,
              },{
                  "field": value,
                  "field1": value1,
              }
          ],
          "visitorcheckout": [
              {
                  "field": value,
                  "field1": value1,
              },{
                  "field": value,
                  "field1": value1,
              }
          ]
      },
  ]
  </code></pre>
  
  <p>I created a visitor model for this named visitor.model.ts -</p>
  
  <pre><code>import { Deserializable } from '../interfaces/deserializable.interface';
  export class Visitor implements Deserializable {
  
      attendeeFirstName: string;
      attendeeSurname: string;
  
      deserialize(input: any): this {
          Object.assign(this, input);
          return this;
        }
  }
  </code></pre>
  
  <p>The desrializable.interface.ts file -</p>
  
  <pre><code>export interface Deserializable {
      deserialize(input: any): this;
  }
  </code></pre>
  
  <p>Is this the right way to create model for the above type of response structure? Also, how do I map response to my model objects and how can I use them in dashboard.component.ts?</p>
  
  <p>Thank you!</p>