使用＜pre＞和JSON.stringify处理网页展示JSON的格式

前言

最近有一个项目，需要在前端展示一个元数据（Metadata）的详细信息，以JSON格式从后端返回，将JSON对象处理为字符串在前端展示时，发现它的格式非常奇怪，所有的字段挤在一起，且部分字段过长，严重影响阅读，如下：

{ "key1": value1, "key2": value2, "key3": value3 }

预期的显示应该是有换行的：

{
    "key1": value1, 
    "key2": value2, 
    "key3": value3
}

本文解决此类JSON在前端显示时的格式问题。

方法

第一步：对后端传来的JSON对象进行序列化，如下：

Obj = JSON.stringify(JSON对象, null, 4);

具体的解释在：JavaScript JSON.stringify() | 菜鸟教程 (runoob.com)

其中，第一个参数为JSON对象，第二个参数可以暂时不管，第三个参数代表JSON每个层级缩进的字符数，也可以为换行符、制表符等。

第二步：使用<pre>标签包装序列化后的对象

如果只进行到步骤1，就将对象在前端页面上展示，那么所有的字段仍然会贴在一起，没有层次。

为了解决这个问题，需要用<pre>标签，包装该对象，如下：

<pre>
  {Obj}
</pre>

<pre> 标签可定义预格式化的文本，且被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。

参考资料

javascript - How can I beautify JSON programmatically? - Stack Overflow