Come visualizzare una rappresentazione JSON e non [Object Object] sullo schermo

Sto realizzando un'applicazione AngularJS 2 con la versione beta. Voglio mostrare una rappresentazione JSON di un oggetto nella mia pagina, ma mostra [Object Object]e non {key1:value1 ....}

Dal componente posso usare:

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

e poi nel modello:

{{example}}

ma se ho un array di oggetti e vorrei stampare un elenco di questi oggetti, come posso farlo?

usando:

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

si traduce in qualcosa di simile:

- [Oggetto Oggetto]
- [Oggetto Oggetto]
- [Oggetto Oggetto]
- [Oggetto Oggetto]

e così via. C'è un modo per visualizzarli come JSON?

Se vuoi vedere cosa hai all'interno di un oggetto nella tua app web, usa la json pipe in un modello HTML del componente, ad esempio:

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

Testato e valido utilizzando Angular 4.3.2.

Possiamo usare il tubo angolare json

{{ jsonObject | json }}

Per eseguire il ciclo attraverso l'oggetto JSON: in Angluar (6.0.0+), ora forniscono la pipe keyvalue:

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

LEGGI ANCHE

Per visualizzare solo JSON

{{ object | json }}

Il dumping del contenuto dell'oggetto come JSON può essere ottenuto senza utilizzare ngFor. Esempio:

Oggetto

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

markup

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

Output (eseguito attraverso un beautifier per una migliore leggibilità, altrimenti viene visualizzato in una singola riga)

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

Ho anche scoperto un formattatore e un visualizzatore JSON che mostra dati JSON più grandi più leggibili (simile all'estensione JSONView Chrome): https://www.npmjs.com/package/ngx-json-viewer

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

Ci sono 2 modi in cui puoi ottenere i valori: -

1. Accedi alla proprietà dell'oggetto utilizzando la notazione punto (obj.property).
2. Accedi alla proprietà dell'oggetto passando il valore della chiave, ad esempio obj ["proprietà"]

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

Aggiornare le risposte degli altri con la nuova sintassi:

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

se si dispone di array di oggetti e si desidera deserializzarli in compoent

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

quindi nel modello

<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)
  });