Cómo mostrar una representación JSON y no [Object Object] en la pantalla

Estoy creando una aplicación AngularJS 2 con la versión beta. Quiero mostrar una representación JSON de un objeto en mi página, pero se muestra [Object Object]y no {key1:value1 ....}

Desde el componente que puedo usar:

get example() {return JSON.stringify(this.myObject)};

y luego en la plantilla:

{{example}}

pero si tengo una matriz de objetos y me gustaría imprimir una lista de estos objetos, ¿cómo puedo hacerlo?

Utilizando:

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

resulta en algo como:

- [Objeto Objeto]
- [Objeto Objeto]
- [Objeto Objeto]
- [Objeto Objeto]

y así. ¿Hay alguna forma de mostrarlos como JSON?

Si desea ver lo que tiene dentro de un objeto en su aplicación web, use la tubería json en una plantilla HTML de componente, por ejemplo:

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

Probado y válido con Angular 4.3.2.

Podemos usar json de tubería angular

{{ jsonObject | json }}

Para recorrer el objeto JSON: en Angluar (6.0.0+), ahora proporcionan la tubería keyvalue:

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

LEA TAMBIÉN

Para mostrar JSON

{{ object | json }}

El volcado del contenido del objeto como JSON se puede lograr sin usar ngFor. Ejemplo:

Objeto

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

Margen

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

Salida (se ejecutó a través de un embellecedor para una mejor legibilidad, de lo contrario, se muestra en una sola fila)

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

También descubrí un formateador y visor JSON que muestra datos JSON más grandes y más legibles (similar a la extensión JSONView Chrome): https://www.npmjs.com/package/ngx-json-viewer

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

Hay 2 formas de obtener los valores: -

1. Acceda a la propiedad del objeto mediante la notación de puntos (obj.property).
2. Acceda a la propiedad del objeto pasando un valor clave, por ejemplo, obj ["propiedad"]

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

Actualización de las respuestas de otros con la nueva sintaxis:

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

si tiene una matriz de objetos y le gustaría deserializarlos en componente

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

luego en plantilla

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

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