How to display a JSON representation and not [Object Object] on the screen

json angular

If you want to see what you you have inside an object in your web app, then use the json pipe in a component HTML template, for example:

<li *ngFor="let obj of myArray">{{obj | json}}</li>

Tested and valid using Angular 4.3.2.

json angular

We can use angular pipe json

{{ jsonObject | json }}

json angular

To loop through JSON Object : In Angluar's (6.0.0+), now they provide the pipe keyvalue :

<div *ngFor="let item of object| keyvalue">  {{ item.key }} - {{ item.value }}</div>

To just display JSON

{{ object | json }}

CodeHunter