web页面上可视化展示JSON数据的方法

0 引言最近需要做一个接口管理的功能，需要在前端页面展示从接口获取到的json数据，我上网查了一些资料，发现有 jquery的一个插件可以使用:jQuery.json-viewer 。页面展示的效果很好，但是需要安装npm包来实现。那么有没有不用安装npm包又能实现同样功能的方法呢？我继续搜索，终于发现了一个非常简单的方法：1实现方法方法其实很简单，直接上代码： html代码如下：<pre><code id="json"></code></pre>1
js代码如下：let btn = document.querySelector('#json');let data = {name:'tim', age: 23, grade: 3};btn.textContent = JSON.stringify(data, null, ' ');1
2
3
效果如下： 0 引言最近需要做一个接口管理的功能，需要在前端页面展示从接口获取到的json数据，我上网查了一些资料，发现有 jquery的一个插件可以使用:jQuery.json-viewer 。页面展示的效果很好，但是需要安装npm包来实现。那么有没有不用安装npm包又能实现同样功能的方法呢？我继续搜索，终于发现了一个非常简单的方法：1实现方法方法其实很简单，直接上代码： html代码如下：<pre><code id="json"></code></pre>
js代码如下：let btn = document.querySelector('#json');let data = {name:'tim', age: 23, grade: 3};btn.textContent = JSON.stringify(data, null, ' ');
效果如下： {    name:"time",    age:23,    grade:3
}
 是不是很简单呢。