Angular 2 - 在用户界面中显示格式化的 JSON 字符串

Question

在我的应用程序中，我有一个 API 调用 returns 具有以下（简化）结构的 JSON：

{
   "prop1": "foo",
   "prop2": "bar",
   "details": "{\"title\": \"Sample Konfabulator Widget\", \"name\": \"main_window\", \"width\": 500, \"height\": 500}"
}

details 道具包含从数据库中读取的大型字符串化 JSON。

现在，我想在用户界面中显示 details 道具的经过美化和格式化的版本，例如：

我试过：

<pre>{{ apiResponse.details }}</pre>

但是整个 JSON 显示在一行中。

我试过的代码是： https://stackblitz.com/edit/angular-pkfgvf?file=src%2Fapp%2Fapp.component.ts

谢谢！

Answer 1

您的 details 它不是 json 对象，这就是它未被解析的原因，您需要将其包装在 JSON.parse()

中

details: JSON.parse("{\"title\": \"Sample Konfabulator Widget\", \"name\": \"main_window\", \"width\": 500, \"height\": 500}")

您现在可以使用 json 管道显示它

{{ apiResponse.details | json  }}

Updated Demo

Answer 2

如果你不想直接在对象中使用 JSON.parse()，那么你可以创建将字符串对象转换为 json.

的管道

Angular 2 - 在用户界面中显示格式化的 JSON 字符串

Angular 2 - Display a formatted JSON string in User Interface

angular2-template

angular