如何在屏幕上显示 JSON 表示而不是 [Object Object]
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34864184/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display a JSON representation and not [Object Object] on the screen
提问by foralobo
I am making an AngularJS 2 application with the beta version. I want to show a JSON representation of an object in my page, but it shows [Object Object]and not {key1:value1 ....}
我正在使用测试版制作一个 AngularJS 2 应用程序。我想在我的页面中显示一个对象的 JSON 表示，但它显示[Object Object]而不是 {key1:value1 ....}
From the component I can use:
从我可以使用的组件中：
get example() {return JSON.stringify(this.myObject)};
and then in the template:
然后在模板中：
{{example}}
but if I have an array of objects and would like to print a list of these objects, how I can do it?
但是如果我有一个对象数组并且想打印这些对象的列表，我该怎么做？
Using:
使用：
<ul>
<li *ngFor="#obj of myArray">{{obj}}</li>
</ul>
results in something like:
结果如下：
- [Object Object] - [Object Object] - [Object Object] - [Object Object]
and so on. Is there a way to display those as JSON?
等等。有没有办法将它们显示为 JSON？
回答by Vlado Tesanovic
If you want to see what you you have inside an object in your web app, then use the json pipein a component HTML template, for example:
如果您想查看 Web 应用程序中对象中的内容，请在组件 HTML 模板中使用json 管道，例如：
<li *ngFor="let obj of myArray">{{obj | json}}</li>
Tested and valid using Angular 4.3.2.
使用 Angular 4.3.2 测试并有效。
回答by ganesh kalje
We can use angular pipe json
我们可以使用角管json
{{ jsonObject | json }}
回答by Vivek Doshi
To loop through JSON Object : In Angluar's (6.0.0+), now they provide the pipe keyvalue:
遍历 JSON 对象：在 Angluar (6.0.0+) 中，现在他们提供管道keyvalue：
<div *ngFor="let item of object| keyvalue">
{{ item.key }} - {{ item.value }}
</div>
To just display JSON
只显示 JSON
{{ object | json }}
回答by Alexei
Dumping object content as JSON can be achieved without using ngFor. Example:
无需使用ngFor. 例子：
Object
目的
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(ran through a beautifier for better readability, otherwise it is output in a single row)
输出（经过美化器以提高可读性，否则在单行中输出）
{
"simpleProp": 1,
"complexProp": {
"InnerProp1": "test1",
"InnerProp2": "test2"
},
"arrayProp": [
1,
2,
3,
4
]
}
I have also discovered a JSON formatter and viewer that displays larger JSON data more readable (similar to JSONView Chrome extension): https://www.npmjs.com/package/ngx-json-viewer
我还发现了一个 JSON 格式化程序和查看器，它显示更大的 JSON 数据更具可读性（类似于 JSONView Chrome 扩展）：https://www.npmjs.com/package/ngx-json-viewer
<ngx-json-viewer [json]="someObject" [expanded]="false"></ngx-json-viewer>
回答by Jaydeep Kataria
<li *ngFor="let obj of myArray">{{obj | json}}</li>
回答by Harkirat Saluja
There are 2 ways in which you can get the values:-
您可以通过两种方式获取值：-
- Access the property of the object using dot notation (obj.property) .
- Access the property of the object by passing in key value for example obj["property"]
- 使用点表示法 (obj.property) 访问对象的属性。
- 通过传入键值来访问对象的属性，例如 obj["property"]
回答by anacampesan
Updating others' answers with the new syntax:
使用新语法更新其他人的答案：
<li *ngFor="let obj of myArray">{{obj | json}}</li>
回答by Arash
if you have array of object and you would like to deserialize them in compoent
如果您有对象数组并且您想在组件中反序列化它们
get example() { this.arrayOfObject.map(i => JSON.stringify (i) ) };
then in template
然后在模板中
<ul>
<li *ngFor="obj of example">{{obj}}</li>
</ul>
回答by Arash
this.http.get<any>('http://192.168.1.15:4000/GetPriority')
.subscribe(response =>
{
this.records=JSON.stringify(response) // impoprtant
console.log("records"+this.records)
});
