json可视化树

1、概要

近期项目需要集成第三方webservice服务，前端界面需要将第三方请求json，返回json的可视化展示。

2、效果

借用第三方插件展示 vue-json-viewer

利用Reflect递归查找赋值

3、数据

请求数据

{"type":"object","properties":{"header":{"type":"object","properties":{"AuthHeader":{"type":"object","properties":{"User":{"description":"User","type":"string"},"Pwd":{"description":"Pwd","type":"string"}}}}},"body":{"type":"object","properties":{"student[Student]":{"description":"student[Student]","type":"array","items":{"type":"object","properties":{"MyProperty1":{"description":"MyProperty1","type":"string"},"MyProperty":{"description":"MyProperty","type":"string"}}}}}}}}

响应数据

{"type":"object","properties":{"header":{"type":"object","properties":{}},"body":{"type":"object","properties":{"HelloWorldResult[Student]":{"description":"HelloWorldResult[Student]","type":"array","items":{"type":"object","properties":{"MyProperty1":{"description":"MyProperty1","type":"string"},"MyProperty":{"description":"MyProperty","type":"string"}}}}}}}}

4、代码

借用第三方插件展示 vue-json-viewer

<template>
  <s-modal subtitle="Json格式化" :operationType="operationType" :maskClosable="false" :destroyOnClose="true" :visible="visible" width="900px" centered
    @ok="handleOk" @cancel="handleCancel">
    <a-spin :spinning="confirmLoading">
      <div>
        <h3>请求json</h3>
      <json-viewer :value="requestJsonData" :expand-depth=5 copyable boxed sort></json-viewer>
        <h3>响应json</h3>
      <json-viewer :value="responseJsonData" :expand-depth=5 copyable boxed sort></json-viewer>
      </div>
    </a-spin>

  </s-modal>
</template>

<script>
import Vue from 'vue'
import { SModal, AreaTitle } from '@/components'
import JsonViewer from 'vue-json-viewer'
Vue.use(JsonViewer)

export default {
  name: 'WebserviceJsonShow',
  components: {
    SModal,
    AreaTitle,
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      operationType: undefined,
      requestJsonData: {
        data: [],
      },   responseJsonData: {
        data: [],
      },
    }
  },
  methods: {
    view(record) {
      console.log('record: ', record)
      this.visible = true
      this.operationType = this.operation.view
      this.requestJsonData.data.push(JSON.parse(record.requestJson))
          this.responseJsonData.data.push(JSON.parse(record.responseJson))
    },
    handleOk() {
      this.$emit('close')
      this.visible = false
    },
    handleCancel() {
      this.visible = false
    },
  },
}
</script>

利用Reflect递归查找赋值

    //json序列化
    initInputDataFromJsonSchema(jsonSchema) {
      const dataInputs = []
      var root = this.jsonSchemaToData(jsonSchema)
      dataInputs.push(root)
      return dataInputs
    },
    jsonSchemaToData(jsonSchema) {
      //console.info(jsonSchema)
      let jsonObj = JSON.parse(jsonSchema)
      //console.info(jsonObj)
      let nodeType = this.reflectStringValue(jsonObj, 'type')
      //var title = this.reflectStringValue(jsonObj, 'title')
      let root = {
        key: 'root',
        name: 'root',
        dataType: '',
        isArray: false,
        children: new Array(),
        //mock: this.reflectStringValue(jsonObj, 'mock'),
        description: this.reflectStringValue(jsonObj, 'description'),
      }
      this.setDataFromJsonSchema(jsonObj, root)
      //console.info(root)
      return root
    },
    setDataFromJsonSchema(jsonObj, parent) {
      if (!jsonObj) return
      let nodeType = this.reflectStringValue(jsonObj, 'type')
      if (nodeType == 'object' && Reflect.has(jsonObj, 'properties')) {
        parent.dataType = nodeType
        parent.children = new Array()
        let nodeProperties = Reflect.get(jsonObj, 'properties')
        if (!nodeProperties) return
        Reflect.ownKeys(nodeProperties).forEach((item) => {
          let itemValue = Reflect.get(nodeProperties, item)
          let child = this.initChildItem(itemValue, item)
          this.setDataFromJsonSchema(itemValue, child)
          parent.children.push(child)
        })
      } else if (nodeType == 'array' && Reflect.has(jsonObj, 'items')) {
        parent.dataType = nodeType
        parent.isArray = true
        parent.children = new Array()
        let nodeProperties = Reflect.get(jsonObj, 'items')
        let child = this.initChildItem(jsonObj, 'items')
        this.setDataFromJsonSchema(nodeProperties, child)
        parent.children.push(child)
      } else if (nodeType == 'number') {
        parent.dataType = nodeType
      } else {
        parent.dataType = nodeType
      }
    },
    initChildItem(obj, name) {
      let child = {
        key: this.itemKey++,
        name: name,
        isArray: false,
        dataType: this.reflectStringValue(obj, 'type'),
        //mock: this.reflectStringValue(obj, 'mock'),
        description: this.reflectStringValue(obj, 'description'),
      }
      return child
    },

    reflectStringValue(obj, property) {
      let value = Reflect.get(obj, property)
      if (value) return value
      else return ''
    },

5、总结

1. 两种方式可视化json数据
2. vue-json-viewer和reflect的使用