Jak wyświetlić reprezentację JSON, a nie [Object Object] na ekranie

Tworzę aplikację AngularJS 2 w wersji beta. Chcę pokazać reprezentację obiektu w formacie JSON na mojej stronie, ale to pokazuje, [Object Object]a nie {key1:value1 ....}

Z komponentu, którego mogę użyć:

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

a następnie w szablonie:

{{example}}

ale jeśli mam tablicę obiektów i chciałbym wydrukować listę tych obiektów, jak mogę to zrobić?

Za pomocą:

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

powoduje coś takiego:

- [Obiekt Obiekt]
- [Obiekt Obiekt]
- [Obiekt Obiekt]
- [Obiekt Obiekt]

i tak dalej. Czy istnieje sposób, aby wyświetlić je jako JSON?

Jeśli chcesz zobaczyć, co masz wewnątrz obiektu w swojej aplikacji internetowej, użyj potoku json w szablonie HTML komponentu, na przykład:

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

Przetestowane i poprawne przy użyciu Angular 4.3.2.

Możemy użyć json angular pipe

{{ jsonObject | json }}

Aby zapętlić obiekt JSON: W Angluar (6.0.0+) teraz zapewniają potok keyvalue:

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

CZYTAJ TAKŻE

Aby po prostu wyświetlić JSON

{{ object | json }}

Zrzucanie zawartości obiektu w postaci JSON można uzyskać bez użycia ngFor. Przykład:

Obiekt

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

Narzut

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

Dane wyjściowe (przeszły przez upiększacz dla lepszej czytelności, w przeciwnym razie są wyświetlane w jednym wierszu)

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

Odkryłem również program formatujący JSON i przeglądarkę, która wyświetla większe dane JSON, bardziej czytelne (podobnie do rozszerzenia JSONView Chrome): https://www.npmjs.com/package/ngx-json-viewer

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

Wartości można uzyskać na dwa sposoby: -

1. Uzyskaj dostęp do właściwości obiektu przy użyciu notacji kropkowej (obj.property).
2. Uzyskaj dostęp do właściwości obiektu, przekazując wartość klucza, na przykład obj ["property"]

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

Aktualizowanie odpowiedzi innych osób za pomocą nowej składni:

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

jeśli masz tablicę obiektów i chciałbyś deserializować je w komponencie

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

następnie w szablonie

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