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

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

De la componente I puede utilizar:

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

y, a continuación, en la plantilla:

{{example}}

pero si tengo una matriz de objetos y quisiera imprimir una lista de estos objetos, ¿cómo puedo hacerlo?

Uso:

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

resultados en algo como:

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

y así sucesivamente. Es allí una manera de mostrar aquellos como JSON?

InformationsquelleAutor foralobo | 2016-01-18

9 Kommentare

  1. 160

    Si quieres ver lo que tienes dentro de un objeto en su aplicación web, a continuación, utilizar la json tubo en un componente HTML de la plantilla, por ejemplo:

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

    Probado y válido el uso de Angulares 4.3.2.

    • Gracias, json pila necesito…de angular 1, algo cambió 🙂
    • Json Tubería estaba disponible en Angular 1 así 😉
    • Impresionante! Gracias.
  2. 18

    Un bucle a través de un Objeto JSON : En Angluar del (6.0.0+), ahora que proporcionan la tubería keyvalue :

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

    LEA TAMBIÉN

    Mostrar sólo JSON

    {{ object | json }}
  3. 11

    Vertido el contenido del objeto JSON, que se puede lograr sin el uso de ngFor. Ejemplo:

    Objeto

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

    Marcado

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

    Salida ran (a través de un formateo automático de los queries para una mejor legibilidad, de lo contrario es de salida en una sola fila)

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

    También he descubierto un JSON formateador y visor que muestra más grande de datos JSON más legible (similar a JSONView extensión de Chrome): https://www.npmjs.com/package/ngx-json-viewer

    <ngx-json-viewer [json]="someObject" [expanded]="false"></ngx-json-viewer>
    • También, si el cambio de div pre etiqueta de obtener correctamente formateado automáticamente.
    • sí. También he añadido una referencia a una muy útil visor que debe mostrar la información de manera más conveniente.
  4. 4

    Hay 2 maneras en que usted puede obtener los valores:-

    1. Acceso a la propiedad de los objetos utilizando la notación de punto (obj.de la propiedad) .
    2. Acceso a la propiedad de los objetos por los que pasa en el valor de la clave por ejemplo obj[«propiedad»]
  5. 4
    <li *ngFor="let obj of myArray">{{obj | json}}</li>
    • El mismo ya está contestada, y usted debe utilizar una palabra clave antes de obj en *ngFor bucle.
  6. 2

    La actualización de las respuestas de otros con la nueva sintaxis:

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

    si el array de objetos y le gustaría deserializar en compoent

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

    a continuación, en la plantilla de

    <ul>
       <li *ngFor="obj of example">{{obj}}</li>
    </ul>
  8. 0
    this.http.get<any>('http://192.168.1.15:4000/GetPriority')
      .subscribe(response => 
      {
      this.records=JSON.stringify(response) //impoprtant
      console.log("records"+this.records)
      });
    • Hey, para mejorar en lo que usted escribió, usted podría añadir alguna explicación a su respuesta para asegurarse de que un lector que no está muy familiarizado con los conceptos pueden entender sus decisiones.

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea