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

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

}

 

是不是很简单呢。