如何在屏幕上显示 JSON 表示而不是 [Object Object]答案

【问题标题】：How to display a JSON representation and not [Object Object] on the screen如何在屏幕上显示 JSON 表示而不是 [Object Object]
【发布时间】：2016-04-24 04:22:26
【问题描述】：

我正在制作一个带有 beta 版本的 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 angular

【解决方案1】：

如果您想查看您在 Web 应用程序中的对象中拥有的内容，请在组件 HTML 模板中使用 json 管道，例如：

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

使用 Angular 4.3.2 测试且有效。

【讨论】：

谢谢，json 堆是我需要的...从 angular 1 发生了一些变化:)
@foralobo Json Pipe 在 Angular 1 中也可用；)
太棒了！谢谢。

【解决方案2】：

我们可以使用角管json

{{ jsonObject | json }}

【讨论】：

【解决方案3】：

循环 JSON 对象：在 Angluar (6.0.0+) 中，现在他们提供管道 keyvalue ：

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

DO READ ALSO

仅显示 JSON

{{ object | json }}

【讨论】：

最喜欢的答案，因为它两者兼而有之，而且您可能需要两者：“仅 json”用于简单变量。但是对于任何像具有循环引用的表单控件，您需要将循环作为第一个选项提供。两者在 Angular9 中仍然是正确的语法。

【解决方案4】：

可以在不使用ngFor 的情况下将对象内容转储为 JSON。示例：

对象

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>

【讨论】：

另外，如果您从 div 更改为 pre 标签，您会自动获得正确的格式。
@Oddleif - 是的。我还添加了对一个非常有用的查看器的引用，它应该更方便地显示信息。

【解决方案5】：

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

【讨论】：

同样的已经回答了，你必须在 *ngFor 循环中的 obj 之前使用 let 关键字。

【解决方案6】：

有两种方法可以获得值：-

使用点符号 (obj.property) 访问对象的属性。
通过传入键值来访问对象的属性，例如 obj["property"]

【讨论】：

【解决方案7】：

用新语法更新其他人的答案：

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

【讨论】：

【解决方案8】：

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

【讨论】：

嘿，为了改进您所写的内容，您可以在答案中添加一些解释，以确保不太熟悉这些概念的读者能够理解您的决定。

【解决方案9】：

如果你有一个对象数组并且你想在组件中反序列化它们

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

然后在模板中

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

【讨论】：