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

Question

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?

Answer 1

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.