วิธีแสดงการเป็นตัวแทน JSON ไม่ใช่ [Object Object] บนหน้าจอ

ฉันกำลังสร้างแอปพลิเคชัน AngularJS 2 ด้วยเวอร์ชันเบต้า ฉันต้องการแสดงการแสดง JSON ของออบเจ็กต์ในเพจของฉัน แต่มันแสดง[Object Object]และไม่ แสดง{key1:value1 ....}

จากส่วนประกอบที่ฉันสามารถใช้ได้:

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

จากนั้นในเทมเพลต:

{{example}}

แต่ถ้าฉันมีอาร์เรย์ของอ็อบเจ็กต์และต้องการพิมพ์รายการอ็อบเจ็กต์เหล่านี้ฉันจะทำอย่างไร?

โดยใช้:

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

ผลลัพธ์ในบางสิ่งเช่น:

- [วัตถุวัตถุ]
- [วัตถุวัตถุ]
- [วัตถุวัตถุ]
- [วัตถุวัตถุ]

และอื่น ๆ มีวิธีแสดงเป็น JSON หรือไม่?

หากคุณต้องการดูว่าคุณมีอะไรอยู่ภายในออบเจ็กต์ในเว็บแอปของคุณให้ใช้ท่อ jsonในเทมเพลต HTML ของคอมโพเนนต์เช่น

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

ทดสอบและใช้ได้โดยใช้ Angular 4.3.2

เราสามารถใช้jsonท่อเชิงมุม

{{ jsonObject | json }}

ในการวนซ้ำ JSON Object: ใน Angluar (6.0.0+) ตอนนี้พวกเขามีไปป์keyvalue:

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

อ่านเพิ่มเติม

เพื่อแสดง JSON

{{ object | json }}

ทิ้งเนื้อหาวัตถุ JSON ngForสามารถทำได้โดยไม่ต้องใช้ ตัวอย่าง:

วัตถุ

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

มาร์กอัป

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

เอาต์พุต (วิ่งผ่านเครื่องตกแต่งเพื่อความสามารถในการอ่านที่ดีขึ้นมิฉะนั้นจะส่งออกเป็นแถวเดียว)

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

ฉันได้ค้นพบตัวจัดรูปแบบ JSON และวิวเวอร์ที่แสดงข้อมูล JSON ขนาดใหญ่อ่านได้มากขึ้น (คล้ายกับส่วนขยาย JSONView Chrome): https://www.npmjs.com/package/ngx-json-viewer

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

มี 2 ​​วิธีในการรับค่า: -

1. เข้าถึงคุณสมบัติของวัตถุโดยใช้สัญลักษณ์จุด (obj.property)
2. เข้าถึงคุณสมบัติของวัตถุโดยการส่งผ่านค่าคีย์ตัวอย่างเช่น obj ["property"]

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

การอัปเดตคำตอบของผู้อื่นด้วยไวยากรณ์ใหม่:

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

หากคุณมีอาร์เรย์ของอ็อบเจ็กต์และคุณต้องการยกเลิกการกำหนดค่าเริ่มต้นด้วยองค์ประกอบ

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

จากนั้นในเทมเพลต

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