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
}
是不是很简单呢。