Как отобразить представление JSON, а не [Объект объекта] на экране

Я делаю приложение AngularJS 2 с бета-версией. Я хочу показать JSON-представление объекта на моей странице, но он показывает [Object Object], а не {key1:value1 ....}

Из компонента, который я могу использовать:

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

а затем в шаблоне:

{{example}}

но если у меня есть массив объектов и вы хотите распечатать список этих объектов, как я могу это сделать?

Использование:

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

приводит к чему-то вроде:

- [Object Object]
- [Object Object]
- [Object Object]
- [Object Object]

и т.д. Есть ли способ показать их как JSON?

Ответ 1

Если вы хотите увидеть, что у вас есть внутри объекта в своем веб-приложении, используйте json-канал в HTML-шаблоне компонента, например:

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

Протестировано и действует с помощью Angular 4.3.2.

Ответ 2

Мы можем использовать angular pipe json

{{ jsonObject | json }}

Ответ 3

Чтобы пройти через JSON Object: в Angluar (6.0. 0+), теперь они предоставляют значение keyvalue :

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

ЧИТАЙТЕ ТАКЖЕ

Чтобы просто отобразить JSON

{{ object | json }}

Ответ 4

Дампирование содержимого объекта как 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>

Вывод (выполняется через beautifier для лучшей читаемости, в противном случае он выводится в одной строке)

{
  "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>

Ответ 5

Есть два способа получить значения: -

Доступ к свойству объекта с использованием точечной нотации (obj.property).
Доступ к свойству объекта путем передачи в значение ключа, например, obj [ "property" ]

Ответ 6

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

Ответ 7

Обновление ответов других с помощью нового синтаксиса:

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

Ответ 8

если у вас есть массив объектов, и вы хотели бы десериализовать их в compoent

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

тогда в шаблоне

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

Ответ 9

this.http.get<any>('http://192.168.1.15:4000/GetPriority')
  .subscribe(response => 
  {
  this.records=JSON.stringify(response) // impoprtant
  console.log("records"+this.records)
  });