I am facing an issue with a particular HTTP request that returns an observable object containing multiple properties. One of these properties is the 'weight' object which has two key values, imperial and metric.
While attempting to loop through the key values of this object, I encountered difficulties rendering the nested objects as it only displays:
weight [object object]
This is the code snippet I used:
<div style=" margin : auto; border : 1px solid black; width : 70%; ">
<div style="display : flex; justify-content : space-around; flex-wrap:wrap;">
<div *ngFor="let breed of (breeds$ | async )" style="flex : 33%">
<div *ngFor="let item of (breed | keyvalue : unsorted)">
<div *ngIf="item.key === 'weight'">
{{breed.weight.imperial}}
</div>
<b>{{item.key}}</b>{{item.value}}
</div>
</div>
</div>
My current approach seems to be limited and ineffective for handling other objects within the observable data. It also does not seem like the most optimal solution.
Here is an example of the data returned by the observable:
{
"weight": {
"imperial": "7 - 10",
"metric": "3 - 5"
},
"id": "abys",
"name": "Abyssinian",
"image": {
"id": "0XYvRd7oD",
"width": 1204,
"height": 1445,
"url": "https://cdn2.thecatapi.com/images/0XYvRd7oD.jpg"
}
}
In an attempt to rectify the issue, I replaced my previous explicit approach with:
<div *ngIf="item.key === 'weight'">
<div *ngFor="let data of item.value">{{data.imperial}}</div>
</div>
Unfortunately, this resulted in the following error message:
Type 'string | number | { imperial: string; metric: string; } | { id: string; width: number; height: number; url: string; }' is not assignable to type '(string & NgIterable<string>) | null | undefined'.ngtsc(2322)