日常工作小笔记---js将Object显示为正确的结构（增强可读性）

实际效果图：

需求背景：

例如你的项目有一个界面展示了所有的接口日志，那么这个无疑问是助你排查问题的利器，这个界面最好的展现形式就是表格，但是想要看入参回参怎么才能好看一些呢，表格完全显示肯定是不美观的，而且也不好看，这里就用了element表格的tooltip组件，但是这个显示的JSON内容做了个格式化处理

示例代码：

1.后端数据返回形式----对象

{
            callBackID: null,
            datas: [{pos: [23, 7, 230, 70], str: "桂xxxxx", type: 0, color: 0, conf: 85}],
            charConf: [70, 88, 90, 88, 83, 82, 93],
            charQuality: "[0:]:正常,[1:A]:正常,[2:9]:正常,[3:9]:正常,[4:7]:正常,[5:A]:正常,,
            color: 0,
            conf: 85,
            plateQuality: "正常",
            pos: [23, 7, 230, 70],
            str: "桂xxxx",
            type: 0,
            error: 1007,
            message: null,
            secondPlateColor: 0,
            secondPlateNumber: "桂xxxxx",
            updateTime: "2021/07/09 09:22:08"
}

2.前端格式化处理代码

<el-table-column prop="reference" label="入参">
   <template slot-scope="scope">
      <el-tooltip class="item" effect="dark" popper-class="tooltip-pre">
           <p class="tool-p">{{scope.row.reference||'--'}}</p>
           <div slot="content">
             <div>
               <div v-html="jsonParse(scope.row.reference)"></div>
             </div>
           </div>
	  </el-tooltip>
   </template>
</el-table-column>

<script>
import Vue from 'vue'
import {jsonParse} from './json2dom.js'
Vue.prototype.jsonParse= jsonParse
</script>

3.这个jsonParse.js

后端返回类型可能有如下两种：

3.1.字符类型

"{\"images\":[{\"format\":\"jpg\",\"name\":\"http://xxxxxx/bbb/20210804/CarPass/URCAM-SDC-xxxxx/xxxxx.jpg\"}],\"imagesInfo\":[{\"recogPosition\":[0,0,0,0],\"scene\":5}],\"procCmd\":{\"enableAlphaLimit\":true,\"enableCharQuality\":true,\"enableCharTrans\":false,\"enableEmerg\":true,\"enableRectify\":true,\"enableReject\":true,\"lightMode\":false,\"minPlateWidth\":80,\"priority\":1,\"timeOut\":180,\"wjAreaCode\":-1}}"

3.2.字符json

"{\n    \"data\": [],\n    \"error\": 0,\n    \"message\": \"ok\"\n}"

3.3. 代码实现

function jsonParse (json) {
  if(!json)return '--'
  //这里做判断  判断后端返回的类型
  if(JSON.stringify(json).includes('\n')){
    json = JSON.stringify(json, null, 2).split('\n')
  }else{
  	//把字符类型转为带`\n`的字符json   然后再走下面的逻辑
    let obj = {}
    obj = eval(JSON.parse(json))
    json = JSON.stringify(obj,null,'\t')
    json = json.split('\n')
  }
  let dom = ''
  let indent = 0
  json.forEach( item => {
    if(item.indexOf('{')===0){
      dom += `<p style="text-indent:${indent}px">${item}</p>`
      indent += 16
    }
    else if(item.indexOf('{')===item.length-1){
      dom += `<p style="text-indent:${indent}px">${item}</p>`
      indent += 16
    }
    else if(item.indexOf('[')===item.length-1){
      dom += `<p style="text-indent:${indent}px">${item}</p>`
      indent += 16
    }
    else if(item.indexOf(': [')!==-1){
      dom += `<p style="text-indent:${indent}px">${item}</p>`
      indent += 16
    }
    else if(item.indexOf('}')!==-1){
      indent = indent - 16
      dom += `<p style="text-indent:${indent}px">${item}</p>`
    }

    else if(item.indexOf(']')===0){
      indent = indent - 16
      dom += `<p style="text-indent:${indent}px">${item}</p>`
    }
    else if(item.indexOf(']')===item.length-1){
      indent = indent - 16
      dom += `<p style="text-indent:${indent}px">${item}</p>`
    }
    else if(item.indexOf('],')===item.length-1){
      indent = indent - 16
      dom += `<p style="text-indent:${indent}px">${item}</p>`
    }
    else if(item.indexOf('],')===0){
      indent = indent - 16
      dom += `<p style="text-indent:${indent}px">${item}</p>`
    }
    else if(item.indexOf(']')===item.length-2){
      indent = indent - 16
      dom += `<p style="text-indent:${indent}px">${item}</p>`
    }
    else{
      dom += `<p style="text-indent:${indent}px">${item}</p>`
    }


  })
  return dom
}

export {
  jsonParse
}

简易版完整代码：

<template>
    <div>
        <el-tooltip class="item" popper-class="tooltip-pre" effect="dark" placement="top-start">
          <el-button>提示</el-button>
          <div slot="content">
            <div>
              <div v-html="jsonParse(strObj)"></div>
            </div>
          </div>
        </el-tooltip>
    </div>
</template>

<script>
import Vue from 'vue'
import {jsonParse} from './jsonParse.js'
Vue.prototype.json2dom = jsonParse
    export default {
      data(){
        return{
          strObj:{
            callBackID: null,
            datas: [{pos: [23, 7, 230, 70], str: "桂xxxxx", type: 0, color: 0, conf: 85}],
            charConf: [70, 88, 90, 88, 83, 82, 93],
            charQuality: "[0:桂]:正常,[1:A]:正常,[2:9]:正常,[3:9]:正常,[4:7]:正常,[5:A]:正常]",
            color: 0,
            conf: 85,
            plateQuality: "正常",
            pos: [23, 7, 230, 70],
            str: "桂xxxxx",
            type: 0,
            error: 1007,
            message: null,
            secondPlateColor: 0,
            secondPlateNumber: "桂xxxxx",
            updateTime: "2021/07/09 09:22:08"
          },
        }
      }
    }
</script>

<style lang="scss" scoped>
</style>

效果图：