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

Question

在我的应用中，我有一个API调用，该API返回具有以下（简化）结构的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}")

Updated Demo

Answer 2

如果您不想直接在对象中使用JSON.parse（），则可以创建将字符串对象转换为json的管道。

Answer 3

请尝试这样。

在打字稿方面

document.getElementById("json").textContent = JSON.stringify(
  data,
  undefined,
  2
);

确保您使用的是前置标签。