Parse/map Angular 7 API response to model class

Question

I am new to Angular. Please excuse if anything is trivially missed by me.

I am trying to make an API call. For this I have created a base service class named base.service.ts (needed code below) -

public get(path: string, params: HttpParams = new HttpParams()): Observable<any> {
    return this.httpClient.get(BASE_URL + path, { params }).pipe(catchError(this.formatErrors));
}

I have also created a new service class named visitor.service.ts from where I call the base service's get method as below -

export class VisitorService {

  constructor(private baseService: BaseService) { }

    getVisitors(): Observable<Visitor[]> {
        return this.baseService.get(String.Format(Globals.endpoints.visitors));
    }
}

From my component class named dashboard.component.ts I load this visitors list -

export class DashboardComponent implements OnInit {

  constructor(private visitorService: VisitorService) { }

  ngOnInit() {
    this.loadTodaysVisitors();
  }

  private loadTodaysVisitors() {

    this.visitorService.getVisitors().subscribe(
      data => {
        console.log(data)
      }
    );
  }
}

My first question is - when I run this code, I do not see anything logged on the console. Why?

Also, my response will be in the following format -

[
    {
        "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,
            }
        ]
    },
]

I created a visitor model for this named visitor.model.ts -

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;
      }
}

The desrializable.interface.ts file -

export interface Deserializable {
    deserialize(input: any): this;
}

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?

Thank you!

Answer 1

Your JSON is not valid, i have corrected it and should be as follows,

[ { "visitor": { "attendeeFirstName": "ABC", "attendeeSurname": "XYZ" }, "visitorcheckin": [ { "field": "value", "field1": "value" }, { "field": "value", "field1": "value" } ], "visitorcheckout": [ { "field": "value", "field1": "value" }, { "field": "value", "field1": "value" } ] }, { "visitor": { "attendeeFirstName": "DEF", "attendeeSurname": "PQR" }, "visitorcheckin": [ { "field": "value", "field1": "value" }, { "field": "value", "field1": "value" } ], "visitorcheckout": [ { "field": "value", "field1": "value" }, { "field": "value", "field1": "value" } ] } ]

you could use JSON2TS to create the interface for your model and the resulting interfaces will be as follows,

declare module namespace {

    export interface Visitor {
        attendeeFirstName: string;
        attendeeSurname: string;
    }

    export interface Visitorcheckin {
        field: string;
        field1: string;
    }

    export interface Visitorcheckout {
        field: string;
        field1: string;
    }

    export interface RootObject {
        visitor: Visitor;
        visitorcheckin: Visitorcheckin[];
        visitorcheckout: Visitorcheckout[];
    }

}