Bagaimana menampilkan representasi JSON dan bukan [Objek Objek] di layar

Saya sedang membuat aplikasi AngularJS 2 dengan versi beta. Saya ingin menunjukkan representasi JSON dari suatu objek di halaman saya, tetapi itu menunjukkan [Object Object]dan tidak {key1:value1 ....}

Dari komponen yang dapat saya gunakan:

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

lalu di template:

{{example}}

tetapi jika saya memiliki array objek dan ingin mencetak daftar objek ini, bagaimana saya bisa melakukannya?

Menggunakan:

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

menghasilkan sesuatu seperti:

- [Objek Objek]
- [Objek Objek]
- [Objek Objek]
- [Objek Objek]

dan seterusnya. Apakah ada cara untuk menampilkannya sebagai JSON?

Jika Anda ingin melihat apa yang Anda miliki di dalam sebuah objek di aplikasi web Anda, gunakan pipa json di template HTML komponen, misalnya:

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

Diuji dan valid menggunakan Angular 4.3.2.

Kita bisa menggunakan pipa sudut json

{{ jsonObject | json }}

Untuk melakukan loop melalui JSON Object: In Angluar's (6.0.0+), sekarang mereka menyediakan pipa keyvalue:

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

JANGAN BACA JUGA

Untuk hanya menampilkan JSON

{{ object | json }}

Membuang konten objek sebagai JSON dapat dilakukan tanpa menggunakan ngFor. Contoh:

Obyek

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 (dijalankan melalui beautifier untuk pembacaan yang lebih baik, jika tidak maka output dalam satu baris)

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

Saya juga menemukan pemformat dan penampil JSON yang menampilkan data JSON yang lebih besar sehingga lebih mudah dibaca (mirip dengan ekstensi Chrome JSONView): https://www.npmjs.com/package/ngx-json-viewer

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

Ada 2 cara untuk mendapatkan nilai: -

1. Akses properti objek menggunakan notasi titik (obj.property).
2. Akses properti objek dengan memasukkan nilai kunci misalnya obj ["property"]

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

Memperbarui jawaban orang lain dengan sintaks baru:

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

jika Anda memiliki berbagai objek dan Anda ingin melakukan deserialisasi objek tersebut dalam bentuk komponen

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

lalu di template

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