本文介绍了两种前端框架——jquery.json-viewer和JsonEditor，用于实现JSON数据的可视化展示和编辑操作。前者依赖jQuery，通过引入js和css文件即可配置，支持设置参数。后者功能更强大，允许添加、修改和删除JSON数据，主要关注jsoneditor.js文件，易于定制。
在一般情况下前后端交互我们只需要提取 json 中我们所需要的数据拿来使用即可，但是如果需要将很长的json进行展示重新写无疑是一件比较痛苦的事情，这里对于json的可视化方面推荐两个较为简洁的框架：
jquery.json-viewer （官方网站）
这个框架导入需要依赖jQuery，之后只需导入一个js文件及一个css文件即可完成配置，相关文件可以在官网给出的GitHub地址中下载，下面给出我的demo代码，值得注意的是四个参数的设定（collapsed , rootCollapsable, withQuotes, withLinks），这个官网中有相关说明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js/jquery.json-viewer.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.json-viewer.css" />
</head>
<body>
<button onclick="expand()">展开</button>
<button onclick="collapse()">折叠</button>
<pre id="json-renderer"></pre>
<script type="text/javascript">
var data = {
"id": 1001,
"type": "donut",
"name": "Cake",
最低0.47元/天 解锁文章
扫一扫
898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
