So zeigen Sie eine JSON-Darstellung und nicht [Objektobjekt] auf dem Bildschirm an

Ich mache eine AngularJS 2-Anwendung mit der Beta-Version. Ich möchte eine JSON-Darstellung eines Objekts auf meiner Seite anzeigen, aber es wird angezeigt [Object Object]und nicht {key1:value1 ....}

Von der Komponente kann ich verwenden:

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

und dann in der Vorlage:

{{example}}

Aber wenn ich eine Reihe von Objekten habe und eine Liste dieser Objekte drucken möchte, wie kann ich das tun?

Verwenden von:

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

ergibt so etwas wie:

- [Objekt Objekt]
- [Objekt Objekt]
- [Objekt Objekt]
- [Objekt Objekt]

und so weiter. Gibt es eine Möglichkeit, diese als JSON anzuzeigen?

Wenn Sie sehen möchten, was sich in einem Objekt in Ihrer Webanwendung befindet, verwenden Sie die JSON-Pipe in einer HTML-Komponentenvorlage, zum Beispiel:

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

Getestet und gültig mit Angular 4.3.2.

Wir können eckiges Rohr json verwenden

{{ jsonObject | json }}

So durchlaufen Sie das JSON-Objekt: In Angluars (6.0.0+) stellen sie jetzt die Pipe bereit keyvalue:

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

LESEN SIE AUCH

Nur JSON anzeigen

{{ object | json }}

Das Speichern von Objektinhalten als JSON kann ohne Verwendung erreicht werden ngFor. Beispiel:

Objekt

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>

Ausgabe (wurde zur besseren Lesbarkeit durch einen Verschönerer geleitet, andernfalls wird sie in einer einzelnen Zeile ausgegeben)

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

Ich habe auch einen JSON-Formatierer und -Viewer entdeckt, der größere JSON-Daten besser lesbar anzeigt (ähnlich der JSONView Chrome-Erweiterung): https://www.npmjs.com/package/ngx-json-viewer

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

Es gibt zwei Möglichkeiten, wie Sie die Werte erhalten können:

1. Greifen Sie mit der Punktnotation (obj.property) auf die Eigenschaft des Objekts zu.
2. Greifen Sie auf die Eigenschaft des Objekts zu, indem Sie den Schlüsselwert übergeben, z. B. obj ["Eigenschaft"].

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

Aktualisieren der Antworten anderer mit der neuen Syntax:

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

Wenn Sie ein Objektarray haben und diese in compoent deserialisieren möchten

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

dann in Vorlage

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