I am having trouble displaying a JSON response in my web panel. When attempting to show the full response, everything works perfectly. However, when I try to use ngFor, I encounter the following errors in the browser:
ERROR TypeError: Cannot read property 'getContext' of null
ERROR TypeError: Cannot read property 'result' of undefined
This is the method I am trying 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>
The API request response class looks like this:
export interface VatAPI {
result: EntityResponse;
}
export interface EntityResponse {
subject: Entity[];
requestDateTime: string;
requestId: string;
}
// Other interfaces...
The API request is as follows:
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, a full example response looks like this:
// Example JSON response data...
Component.ts code snippet:
this.ApiService.getcomments().subscribe((data) => {
this.lstresult = data;
});
It might be a beginner mistake, but I'm struggling to resolve this issue ;)