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?

score 224 · Answer 1 · edited Jun 21 '17 at 20:45

224

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.

edited Jun 21 '17 at 20:45

LJH

7,444
3
10
19

answered Jan 18 '16 at 21:19

Vlado Tesanovic

6,369
2
20
31

Thank you, the json pile was I need...from angular 1 something changed :) – foralobo Jan 18 '16 at 21:57
@foralobo Json Pipe was available in Angular 1 as well ;) – Ilker Cat Oct 11 '17 at 17:27

score 92 · Answer 2 · answered Jul 06 '17 at 09:52

92

We can use angular pipe json

{{ jsonObject | json }}

answered Jul 06 '17 at 09:52

ganesh kalje

3,014
2
16
12

Vivek Doshi · Answer 3 · 2018-11-16T14:38:59.303

49

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>

DO READ ALSO

To just display JSON

{{ object | json }}

edited Nov 16 '18 at 14:38

answered Nov 01 '18 at 13:41

Vivek Doshi

56,649
12
110
122

2

Fav answer because it has both, and you'll likely need both: "just json" for simple variables. But for anything like a form control that has circular references, you'll need the loop presented as the first option. Both are still correct syntax in Angular9. – MotoRidingMelon May 13 '20 at 00:01

Alexei - check Codidact · Answer 4 · 2018-10-03T11:07:36.007

Dumping object content as JSON can be achieved without using ngFor. Example:

Object

export class SomeComponent implements OnInit {
    public theObject: any = {
        simpleProp: 1,
        complexProp: {
            InnerProp1: "test1",
            InnerProp2: "test2"
        },
        arrayProp: [1, 2, 3, 4]
    };

Markup

<div [innerHTML]="theObject | json"></div>

Output (ran through a beautifier for better readability, otherwise it is output in a single row)

{
  "simpleProp": 1,
  "complexProp": {
    "InnerProp1": "test1",
    "InnerProp2": "test2"
  },
  "arrayProp": [
    1,
    2,
    3,
    4
  ]
}

I have also discovered a JSON formatter and viewer that displays larger JSON data more readable (similar to JSONView Chrome extension): https://www.npmjs.com/package/ngx-json-viewer

<ngx-json-viewer [json]="someObject" [expanded]="false"></ngx-json-viewer>

Also, if you change from div to pre tag you get it properly formated automatically. — Oddleif, Oct 03 '18 at 10:53
@Oddleif - yes. I have also added a reference to a very useful viewer that should display the information more conveniently. — Alexei - check Codidact, Oct 03 '18 at 11:08

Jaydeep Kataria · Answer 5 · 2017-06-15T06:48:57.400

6

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

edited Jun 15 '17 at 06:48

answered Mar 24 '17 at 09:10

Jaydeep Kataria

817
10
22

The same is already answered, and you must use a let keyword before obj in *ngFor loop. – Alexis Jun 14 '17 at 18:27

score 5 · Answer 6 · answered Jan 18 '16 at 21:28

5

There are 2 ways in which you can get the values:-

Access the property of the object using dot notation (obj.property) .
Access the property of the object by passing in key value for example obj["property"]

answered Jan 18 '16 at 21:28

Harkirat Saluja

7,768
5
47
73

score 2 · Answer 7 · answered Apr 27 '17 at 16:39

2

Updating others' answers with the new syntax:

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

answered Apr 27 '17 at 16:39

anacampesan

105
10

score 1 · Answer 8 · answered May 17 '19 at 06:41

1

this.http.get<any>('http://192.168.1.15:4000/GetPriority')
  .subscribe(response => 
  {
  this.records=JSON.stringify(response) // impoprtant
  console.log("records"+this.records)
  });

answered May 17 '19 at 06:41

4

Hey, to improve on what you wrote, you could add some explanation to your answer to make sure that a reader who is not very familiar with the concepts can understand your decisions. – AplusKminus May 17 '19 at 07:08

score 0 · Answer 9 · answered Oct 03 '18 at 11:11

0

if you have array of object and you would like to deserialize them in compoent

get example() { this.arrayOfObject.map(i => JSON.stringify (i) ) };

then in template

<ul>
   <li *ngFor="obj of example">{{obj}}</li>
</ul>

answered Oct 03 '18 at 11:11

Arash

3,458
7
32
50

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

9 Answers9

Linked