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    lt ul gt      lt li  ngFor   obj of myArray  gt   obj   lt  li gt   lt  ul gt    results in something like    -  Object Object  -  Object Object  -  Object Object  -  Object Object    and so on  Is there a way to display those as JSON

User · Answer

To loop through JSON Object   In Angluar s  6 0 0    now they provide the pipe keyvalue     lt div  ngFor  let item of object  keyvalue  gt       item key    -    item value     lt  div gt    DO READ ALSO  To just display JSON     object   json

User · Answer

this http get lt any gt   http   192 168 1 15 4000 GetPriority      subscribe response   gt         this records JSON stringify response     impoprtant   console log  records  this records

User · Answer

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   lt div  innerHTML   theObject   json  gt  lt  div gt    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   lt ngx-json-viewer  json   someObject   expanded   false  gt  lt  ngx-json-viewer gt

User · Answer

Updating others  answers with the new syntax    lt li  ngFor  let obj of myArray  gt   obj   json   lt  li gt

User · Answer

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

User · Answer

lt li  ngFor  let obj of myArray  gt   obj   json   lt  li gt

User · Answer

if you have array of object and you  would like to deserialize them in compoent   get example     this arrayOfObject map i   gt  JSON stringify  i         then in template    lt ul gt      lt li  ngFor  obj of example  gt   obj   lt  li gt   lt  ul gt

User · Answer

We can use angular pipe json     jsonObject   json

User · Answer

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    lt li  ngFor  let obj of myArray  gt   obj   json   lt  li gt    Tested and valid using Angular 4 3 2

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

Examples related to json

Examples related to angular