当前位置：网站首页>使用＜pre＞和JSON.stringify处理网页展示JSON的格式

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

2022-07-17 08:55:00 【裕东方】

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

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

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

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

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

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

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

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

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

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

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

<pre>
  {Obj}
</pre>

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

版权声明
本文为[裕东方]所创，转载请带上原文链接，感谢
https://blog.csdn.net/yyd19981117/article/details/125723000