Як відобразити представлення 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>

Випробувано та дійсно за допомогою кутового 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>

Є два способи отримання значень: -

1. Отримайте доступ до властивості об'єкта, використовуючи крапкові позначення (obj.property).
2. Доступ до властивостей об'єкта, передавши ключове значення, наприклад obj ["властивість"]

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