Printing out API result with ngFor Angular

Question

I'm trying to print json response in my web panel. When I try to display full response it works perfectly but then I try to use ngFor i get those errors in form the browser:

ERROR TypeError: Cannot read property 'getContext' of null

ERROR TypeError: Cannot read property 'result' of undefined

this is a method that I try to use:

 <div *ngFor="let subject of lstresult.result.subject | json " class=" col-lg-4">
  <div class=" card card-chart">
    <div class=" card-header">
      <h5 class=" card-category">Completed Tasks</h5>
      <span>{{ subject | json }}</span>
      <br /><br />
    </div>
    <div class=" card-body">

    </div>
  </div>
</div>

class prepaired for API looks like this:

   export interface VatAPI {
      result: EntityResponse;
    }
    
    export interface EntityResponse {
      subject: 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;
    }

and API request looks like this:

export class ApiService {
  constructor(private httpclient: HttpClient) {}
  getcomments(): Observable<any> {
    return this.httpclient.get(
      "https://wl-api.mf.gov.pl/api/search/nips/5213003700,6151001756?date=2020-07-27"
    );
  }
}

for some context full example response look like this:

"result" : { "subjects": [ { "name": "ARTUR PIKOR, EWA PIKOR SKLEP \"MERCEDES\" AUTO SERWIS S.C.", "nip": "6151001756", "statusVat": "Czynny", "regon": "230180142", "pesel": null, "krs": null, "residenceAddress": null, "workingAddress": "LUBAŃSKA 5, 59-903 ZGORZELEC", "representatives": [], "authorizedClerks": [], "partners": [], "registrationLegalDate": "1994-12-29", "registrationDenialBasis": null, "registrationDenialDate": null, "restorationBasis": null, "restorationDate": null, "removalBasis": null, "removalDate": null, "accountNumbers": [ "75109019680000000106202838" ], "hasVirtualAccounts": false }, { "name": "FUNDACJA WIELKA ORKIESTRA ŚWIĄTECZNEJ POMOCY", "nip": "5213003700", "statusVat": "Zwolniony", "regon": "010168068", "pesel": null, "krs": "0000030897", "residenceAddress": null, "workingAddress": "DOMINIKAŃSKA 19C, 02-738 WARSZAWA", "representatives": [], "authorizedClerks": [], "partners": [], "registrationLegalDate": "2004-04-19", "registrationDenialBasis": null, "registrationDenialDate": null, "restorationBasis": null, "restorationDate": null, "removalBasis": null, "removalDate": null, "accountNumbers": [ "79114010100000524444001001", "14114010100000524444001007", "56114010100000524444001027", "29114010100000524444001028", "29124011121111001000177255" ], "hasVirtualAccounts": true } ], "requestDateTime": "08-08-2020 19:25:11", "requestId": "1khm1-88d50kn" }

component.ts code:

this.ApiService.getcomments().subscribe((data) => {
  this.lstresult = data;
});

perhaps it's a beginner mistake but I cannot solve this problem ;)

Answer 1

I assume data has shown json response. Then, you need to make following changes to HTML,

<div *ngFor="let subject of lstresult.result.subjects" class=" col-lg-4">