I am seeking advice on working with a nested JSON object. Within our server, there is an object located at "/dev/api/sportstypes/2" structured like this;
{
"NBA": {
"link": "https://www.nba.com/",
"ticketPrice": 50
},
"UEFA": {
"link": "https://www.uefa.com/",
"ticketPrice": 39
},
"CL": {
"link": "https://www.uefa.com/uefachampionsleague/",
"ticketPrice": 76
},
"EuroLeague": {
"link": "https://www.euroleague.net/",
"ticketPrice": 42
}
}
This appears to be a nested JSON object due to containing multiple smaller objects within it. The sports class structure is as follows;
export class Sports {
link: string; //The website link of the sports association
ticketPrice: number; //The average ticket price for that association
}
An attempt was made to retrieve the JSON object in the service using the following method;
getPrices():Observable<Sports[]> {
return this.http.get<Sports[]>(sportsPath); //sportsPath corresponds to the path leading to the provided JSON data
}
In the TypeScript file, the subscription to the object is done through this function;
sportsObject : Sports[] //This member variable needs to be populated with the JSON object
ngOnInit(){
this.SportsService.getPrices().subscribe(data=>{
this.sportsObject = data;
console.log("Our member contains: " + this.sportsObject);
})
}
However, the console log output is "[object Object]". How can I correctly extract and subscribe to this object?
Additionally, when attempting to execute an ngFor loop in the HTML file, an error stating "Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays." is raised with this code;
<div *ngFor="let member of sportsObject">
<p>The link is:</p>
<p>{{ member.link }}</p>
</div>
How can I properly implement the ngFor loop in this scenario?