I have a question that has been asked before, but I am unable to achieve the desired result with my current approach.
When my service retrieves data from an API, it returns results in the following format:
{
"nhits": 581,
"parameters": {
"dataset": "communes-belges-2019",
"rows": 1,
"start": 0,
"facet": [
"niscode",
"region",
"nis_code_region"
],
...
Currently, my service retrieves data like this:
getProvinces(): Observable<any[]>{
return this._http.get<any>(this.apiProvinces)
.pipe(
map((response: any) => response.records as any[]),
catchError(this.handleError)
)
}
It currently returns an Observable<any[]>, but I want to receive an object instead.
To do this, I have defined a class with the following properties:
export class Record{
region : string;
nom_commune : string;
prov_name_fr: string;
records?: [];
constructor(reg: string, commune: string, prov: string) {
this.region = reg;
this.nom_commune = commune;
this.prov_name_fr = prov;
}
}
I attempted to modify my code by replacing any[] with Record[], but it did not work as expected.
getProvinces(): Observable<Record[]>{
return this._http.get<Record[]>(this.apiProvinces)
.pipe(
map(response => response as Record[]),
catchError(this.handleError)
)
}
In my component, I declared an Observable<Record[]> like this:
public results$!: Observable<Record[]>;
And called the service as follows:
this.results$ = this.apiService.getProvinces();
To display the content in the HTML part, I used:
<div *ngFor="let p of (results$ | async)">
{{p | json}}
</div>
However, I encountered the error message: "Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays."
I'm having difficulty accessing the object. Any guidance would be appreciated as I am new to Angular.
Thank you