如何使用 Angular 创建一个 json 对象并使用 html 显示它？

Posted 2023-03-13

【中文标题】如何使用 Angular 创建一个 json 对象并使用 html 显示它？

【英文标题】：How can I create a json object using Angular and display it using html?

【发布时间】：2018-03-31 17:23:32

【问题描述】：

基本上我正在使用一个我一无所知的 json 对象，我不知道它的键，我不知道它的价值。我设法使用它并处理我想要的所有信息，最后我有一个数组（我需要一个数组才能做我想做的事），其中包含 json 中的所有键及其路径。有没有办法可以将它放回 json 并使用 html 显示？

【问题讨论】：

你试过什么？我们只知道您对问题的了解程度

嗯，我还在网上找答案，想办法解决

【参考方案1】：

如果您不想使用 devTool 来显示您的 json 对象，您可以在模板中执行此操作：

<div> yourObject | json</div>

【讨论】：

或者更好地将其包裹在 <pre></pre> 中，因为 json 过滤器将为您执行换行和缩进。

【参考方案2】：

第 1 步： 简单的 javascript：const arrayAsJson = JSON.stringify(yourArray)

第 2 步：要显示数据，请按照 @Bougarfaoui El houcine 的答案以及 cmets 中提到的那样获得格式化输出：

<pre> arrayAsJson | json </pre>