Trying to convert my JSON to a string but get [object Object] - json

Question

When I try to display my subData in Angular I get [object Object]:
enter image description here
I have a model that can contain an array of sites:
public class Site
{
public int Id { get; set; }
public string Name { get; set; } = string.Empty;
public string Url { get; set; } = string.Empty;
public Site[]? SubData { get; set; }
}
JSON Example:
{
"id": 1,
"name": "Google",
"url": "http://www.google.com",
"subData": [
{
"id": 2,
"name": "Walla",
"url": "http://www.walla.co.il"
}
]
},
components.ts:
export class AppComponent implements OnInit{
sites: Site[] = [];
constructor(private siteService:SiteService) { }
ngOnInit(): void {
this.GetSites();
}
GetSites() {
this.siteService.GetSites()
.subscribe((sites) => {
JSON.stringify(this.sites = sites);
});
}
}
html:
<div *ngFor="let item of sites;">
<div>Id: {{item.id}}</div>
<div>Site Name: {{item.name}}</div>
<div>Site Url: {{item.url}}</div>
<div>{{item.subData}}</div>
</div>

Answer 1

You make it even cleaner with async pipe:
<div *ngFor="let item of sites$ | async as site;"> // use async pipe here
<div>Id: {{site.id}}</div>
<div>Site Name: {{site.name}}</div>
<div>Site Url: {{site.url}}</div>
// use ngfor for subdata
<div *ngFor="let subSite of site?.subData"> // use ? for safety
<div> {{subSite?.url}}</div>
</div>
</div>
export class AppComponent implements OnInit{
sites$: Observable<Site[]>;
constructor(private siteService:SiteService) { }
ngOnInit(): void {
this.GetSites();
}
GetSites() {
this.sites$ = this.siteService.GetSites();
}
}

Answer 2

use json pipe something like
<div>{{item.subData | json}}</div>
Update as per comment to display as html element use ngFor loop
<div *ngFor="let i of item.subData">
<div> {{i.url}}</div>
</div>