pipes - pipe json angular 6

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

Question

Estoy haciendo una aplicación AngularJS 2 con la versión beta. Quiero mostrar una representación JSON de un objeto en mi página, pero 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:

- [Object Object] - [Object Object] - [Object Object] - [Object Object]

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

Answer 1

Actualizando las respuestas de otros con la nueva sintaxis:

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

Answer 2

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"]

Answer 3

Podemos usar tubería angular json

{{ jsonObject | json }}

Answer 4

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.

Answer 5

Volcar el 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 emite 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>

Answer 6

si tiene una matriz de objetos y desea deserializarlos en componentes

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

luego en plantilla

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

Answer 7

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

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

LEER TAMBIÉN

Para mostrar solo JSON

{{ object | json }}

Answer 8

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

Answer 9

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