vue-json-viewer展示JSON内容

01 前言

最近写的一个小案例，需要将接口返回的JSON内容显示在页面上，要求是要和控制台返回的JSON内容一样能点击展开显示或者关闭，当时只知道处理内容格式，后来才发现可以通过json-viewer解决。

02 接口内容预处理

我这边是用axios去获取接口内容，最开始是获取到一个对象，因为想着要获取其内容要以JSON格式展示，所以要将该对象进行JSON格式化。

JSON格式化的方式如下：

JSON.stringify(value, replacer, space)
//value是指js对象
//replacer为替换对象，可以是一个方法、对象或数组，将value按照替换规则展示。
//space为填充参数，可以是数字或字符串，将value按照参数进行格式化展示。

但是通过JSON.stringify()处理后的内容直接用json-viewer，发现是一堆类似JSON格式的文本，依旧实现不了控制台那样的点击展开或关闭的情况，后面发现还要通过JSON.parse()进一步处理，将其处理成JavaScript对象。

所以接口内容处理代码如下：

		axios.get(this.urlAdd).then(res => {
          console.log(res);
          this.dataResponse = JSON.stringify(res, null, ' ');
          this.dataResponse = JSON.parse(this.dataResponse);
        })

03 json-viewer使用

json-viewer属于vue的插件，所以使用前需要安装。

1. vue-json-viewer插件安装

npm install vue-json-viewer --save

2. 引入插件
   我这边是全局引入，另外还引入了对应的样式，代码如下：

//main.js
import Vue from 'vue'
import JsonViewer from 'vue-json-viewer'
Vue.use(JsonViewer);

//App.vue
import 'vue-json-viewer/style.css';

3. 使用插件
   插件引入后，直接在Vue所控制的元素块内对应的位置使用即可。
   具体使用方法可以参考官网地址：vue-json-viewer
   我这边的代码如下：

<json-viewer :value="dataResponse" :expand-depth=2 copyable boxed sort v-if="dataResponse"  @keyclick="handleClickJson"></json-viewer>

其中绑定的keyclick事件，是我之后用于点击展示的对应的JSON内容，获取所点击位置的值而绑定的事件。
expand-depth的值是指默认展示的层数。

基本上通过上述步骤就能成功把JSON内容按控制台的格式展示在页面上了。