在映射 https 响应时获取 [object Object]

Question

I am getting an [object Object] while using Observable map in angular 10.

Here is the response object from the API service.

{
  "result": {
    "subject": {
      "name": "ROBERT JAZGARA",
      "nip": "7272445205",
      "statusVat": "Czynny",
      "regon": "472301670",
      "pesel": null,
      "krs": null,
      "residenceAddress": "ZAGŁOBY 21/10, 02-495 WARSZAWA",
      "workingAddress": null,
      "representatives": [],
      "authorizedClerks": [],
      "partners": [],
      "registrationLegalDate": "2002-05-21",
      "registrationDenialBasis": null,
      "registrationDenialDate": null,
      "restorationBasis": null,
      "restorationDate": null,
      "removalBasis": null,
      "removalDate": null,
      "accountNumbers": [
        "95213000042001029002150001",
        "78105019241000009719369622"
      ],
      "hasVirtualAccounts": false
    },
    "requestId": "mbn71-88a34h6",
    "requestDateTime": "27-07-2020 23:52:30"
  }
}

Here is the model I have created to map with the response.

export interface VatAPI {
  result: EntityResponse;
}

export interface EntityResponse {
  subjects: Entity[];
  requestDateTime: string;
  requestId: string;
}

export interface Entity {
  authorizedClerks: EntityPerson[];
  regon: string;
  workingAddress: string;
  hasVirtualAccounts: boolean;
  statusVat: string;
  krs: string;
  restorationBasis: string;
  accountNumbers: string[];
  registrationDenialBasis: string;
  representatives: EntityPerson[];
  residenceAddress: string;
  registrationDenialDate: Date;
  restorationDate: Date;
  name: string;
  registrationLegalDate: Date;
  removalBasis: string;
  removalDate: Date;
  nip: string;
  partners: EntityPerson[];
  pesel: string;
}

export interface EntityPerson {
  firstName: string;
  lastName: string;
  nip: string;
  companyName: string;
}

Service class to call the https and map the response.

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import {
  HttpClientModule,
  HttpClient,
  HttpParams,
} from '@angular/common/http';

@Injectable()
export class ApiService {
  constructor(private httpclient: HttpClient) {}
  getcomments(): Observable<any> {
    return this.httpclient.get(
      'https://wl-api.mf.gov.pl/api/search/nip/7272445205?date=2020-07-27'
    );
  }

}

Here is the app.component.ts which is calling api.service.ts

import { Component } from '@angular/core';

import { VatAPI } from './classes/vatapi';
import { ApiService } from './services/api.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private ApiService: ApiService) {}

  lstresult: VatAPI;

  // tslint:disable-next-line: use-lifecycle-interface
  ngOnInit(): void {
    this.ApiService.getcomments().subscribe((data) => {
      this.lstresult = data;
    });
  }
}

And my app.comonent.html looks like this

<h2>Get Request (https://wl-test.mf.gov.pl:9091/wykaz-podatnikow/api/search/nip/7272445205?date=2020-07-27)</h2>

<span>{{ lstresult }}</span>

When I serve the project I am getting [object Object] response. Where is the mistake I am unable to figure it out plz help

Answer 1

Use the json pipe to see the data.

<span>{{ lstresult | json }}</span>