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 Comentarios

  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.

Dejar respuesta

Please enter your comment!
Please enter your name here