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

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: <a href="{{item.url}}">{{item.url}}</a></div>
  <div>{{item.subData}}</div>
</div>

Bozhinovski · Accepted Answer · 2022-10-11 12:17:16Z

2

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: <a href="{{site.url}}">{{site.url}}</a></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();
  }
}

answered Oct 11, 2022 at 12:17

Bozhinovski

2,9864 gold badges26 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jitender · Accepted Answer · 2022-10-11 12:07:04Z

1

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>

edited Oct 11, 2022 at 12:07

answered Oct 11, 2022 at 12:01

jitender

10.4k1 gold badge22 silver badges49 bronze badges

4 Comments

Mor levi Over a year ago

Works for me but if I don't want it to be in a JSON structure because I want to do CSS on it

Dilip Hirapara Over a year ago

you can use it <pre>{{item.subData | json}}</pre>

Mor levi Over a year ago

@DilipHirapara But I don't want the brackets and the array to appear

jitender Over a year ago

@DanielRazal use ngfor to loop on subdata and print the required values.Updated example for url

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related