解析深层 Json 文件并在前端 Angular 中显示数据
Posted
技术标签:
【中文标题】解析深层 Json 文件并在前端 Angular 中显示数据【英文标题】：Parsing a deep level Json file and displaying the data in the frontend Angular 【发布时间】：2021-05-02 18:36:07 【问题描述】：我有一个格式为： 数据 = key1: value1, key2: [key2_1: value2_1, key2_2: value2_2], key3: value3, . . .键：值n
我想使用 Angular 9 以以下方式解析深层 json 并在前端显示数据： key1 : value1\n （我使用 \n 表示新行） key2 : （任何间距或缩进） key2_1: value2_1\n key2_2: value2_2\n key3: value3\n 。 ..键：值 如果有人可以提供帮助，我们将不胜感激。
Value: any;
Key: any;
this.Value = Object.entries(this.data)
this.Key = Object.keys(this.data)
<html>
<ul >
<li *ngFor = "let i of Value">i</li>
</ul>
</html>【问题讨论】：
能否提供更具体的代码sn-p？有很多方法可以做到这一点。 我已经添加了 html 和 typescript 文件。 ?我不能做一个深钱包。非常感谢您与我们联系。 【参考方案1】：您可能可以使用 pipe 之类的 json 或创建自己的格式以获得更多格式：
<ul>
<li *ngFor="let k of keys">
k:data[k] | json
</li>
</ul>
https://stackblitz.com/edit/angular-gbflt7?file=src/app/app.component.html
【讨论】：
感谢您与我分享代码！我认为这不完全是我在看的。对于嵌套的键、值对，我还想要任何类型的缩进或换行符，而不是将整个内容解析为 json。它看起来会很有趣。 @PriyankarBose 我认为一个不错的选择是让您创建自己的自定义管道。通过这样做，您将提供一种一致的方式来在未来的其他组件中处理此问题。 ！感谢您的回复！你能举一个制作管道的例子吗？我想让它通用。以上是关于解析深层 Json 文件并在前端 Angular 中显示数据的主要内容，如果未能解决你的问题，请参考以下文章
将从 spring-boot 检索到的数据转换为 JSON 并在 Angular 前端获取它