还有另一个jQuery JSON查看器插件，它以HTML格式呈现JSON对象，并支持语法高亮显示和可折叠/可消耗导航。

参见：

• 用于JSON Beautifier和Viewer的轻量级jQuery插件-jjsonviewer

如何使用它:

1.加载所需的jquery.json-viewer.css用于JSON查看器的基本样式。

<link href="jquery.json-viewer.css" rel="stylesheet">

2.安装jQuery库后，加载jQuery JSON Viewer的脚本。

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.json-viewer.js"></script>

3.为JSON查看器创建一个容器元素。

<pre id="json-viwer"></pre>

4.准备好你的JSON数据，插件会把它们作为输入，这些数据会被转换成html并添加到你刚刚创建的容器元素中。

$('#json-viewer').json_viewer(input);

5.在init上折叠所有节点。

$('#json-viewer').jsonViewer(input, {
  collapsed: true
});

6.所有JSON键都用双引号括起来。默认值：false。

$('#json-viewer').jsonViewer(input, {
  withQuotes: false
});

7.使有效链接可点击。默认值：true。

$('#json-viewer').jsonViewer(input, {
  withLinks: false
});

8.使根节点可折叠。默认值：true。

$('#json-viewer').jsonViewer(input, {
  rootCollapsable: false
});

9.决定是否允许第三方图书馆处理大数字。默认值：false。

$('#json-viewer').jsonViewer(input, {
  bigNumbers: false
});

更新日志：

2022-10-25

• 错误修复

v1.5.0 (2022-05-10)

• 增加了对BigInt（本机）和其他库的支持（“bigNumbers”选项）
• 固定URL检测，仅依赖于协议
• 修复了密钥中的XSS注入

2022-05-04

• 固定短毛犯

2022-05-04

• 修复JSON对象密钥显示

2019-08-14

• 固定式过梁

2019-08-12

• 更快的URL检查

v1.3.0版本（2019-07-04）

• 改进的url检测和转义引号（修复XSS注入）

2019-07-04

• 修复了json具有名为“hasOwnProperty”的属性时的错误

2019-03-11

• 添加了rootCollapsable选项

2019-03-10

• JS更新

2017-03-22

• 固定箭头大小问题

2016-10-01

• JS更新

2016-04-27

• 添加了报价选项

2016-02-17

• 添加了在init上折叠所有节点的选项

2015-04-03

• 转义JSON内容中的XML/HTML标记

2015-02-21

• 使dict键名称可点击

2014-12-25

• 单击占位符时切换块，在CSS中使用“em”而不是“px”

预览截图

易于阅读 JSON数据查看器 jQuery插件