I am making an AngularJS 2 application with the beta version. I want to show a JSON representation of an object in my page, but it shows [Object Object] and not {key1:value1 ....}
From the component I can use:
get example() {return JSON.stringify(this.myObject)};
and then in the template:
{{example}}
but if I have an array of objects and would like to print a list of these objects, how I can do it?
Using:
<ul>
<li *ngFor="#obj of myArray">{{obj}}</li>
</ul>
results in something like:
- [Object Object] - [Object Object] - [Object Object] - [Object Object]
and so on. Is there a way to display those as JSON?
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.
We can use angular pipe json
{{ jsonObject | json }}
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 }}