How to render <object object> in template in JSON

Issue

I am a newbie to angular. I have difficulties showing JSON data on my HTML. is shown instead. How can I show the data instead of showing ?

cards.component.ts

serverData: JSON;

getData() {
    return this.httpClient.get('http://localhost:5000/details')
    .subscribe(data => {this.serverData = data as JSON;
      console.log(this.serverData);
    })
  }

cards.component.html

<div>
  {{getData() | json}}
</div>

Solution

You are returning a Subscription in getData() not serverData. try it like this: cards.component.ts

serverData:JSON;

ngOnInit(){
    // Dont forget to call getData()
    this.getData()
}

getData() {
    this.httpClient.get('http://localhost:5000/details')
    .subscribe(data => {this.serverData = data as JSON;
      console.log(this.serverData);
    })
}

cards.component.html

<div>
  {{serverData | json}}
</div>

If you need to return the data you get from the observable directly, you can use Rxjs map() operator.

Answered By - michael scarn