遞歸解析Json，實現生成可視化Tree+快速獲取JsonPath

內部平臺的一個小功能點的實現過程，分享給大家：

遞歸解析Json，可以實現生成可視化Tree+快速獲取JsonPath。

步驟：

1.利用JsonPath讀取根，獲取JsonObject

2.遞歸層次遍歷JsonObjec，保存結點信息

3.利用zTree展示結點為可視化樹，點擊對應樹的結點即可獲取對應結點的JsonPath

1.利用JsonPath讀取根，獲取JsonObject

示例Json：

{
  "errorMessage": null,
  "errorCode": null,
  "dates": {
    "tradeAmt": null,
    "riskLevel": "LEVEL30",
    "optSelected": {
      "77": [
        {
          "optionContent": "20-50萬元",
          "productCode": null,
          "created": null,
          "optionOrder": null,
          "modified": null,
          "id": 361,
          "optionScore": 8,
          "isInvalid": 1
        }
      ],
      "78": [
        {
          "optionContent": "資產50-500萬元，無債務或債務較輕",
          "productCode": null,
          "created": null,
          "optionOrder": null,
          "modified": null,
          "id": 365,
          "optionScore": 6,
          "isInvalid": 1
        }
      ]
    },
    "riskInfoResult": {
      "optLetter": "A",
      "mqOrder": "1",
      "residenceCountryCode": null,
      "taxReason": null,
      "residenceCountryName": null,
      "residenceCountryNameEn": null,
      "countryNameEn": null,
      "taxInfoCode": null,
      "taxInfoIsCompleted": true,
      "taxInfoIsRight": true,
      "countryCode": null,
      "taxId": null,
      "countryName": null,
      "taxReasonInt": null
    },
    "created": 1565654328000,
    "questions": [
      {
        "questionContent": "您的職業？",
        "productCode": null,
        "created": 1498630051000,
        "options": null,
        "questionSource": "BUSINESS",
        "modified": 1498630051000,
        "id": 75,
        "isInvalid": 1,
        "questionType": 1,
        "order": 1
      },
      {
        "questionContent": "您的主要收入來源是？",
        "productCode": null,
        "created": 1498630051000,
        "options": null,
        "questionSource": "BUSINESS",
        "modified": 1498630051000,
        "id": 76,
        "isInvalid": 1,
        "questionType": 1,
        "order": 2
      }
    ],
    "serialCode": "123",
    "isInvalid": 1,
    "expireTime": 1628783999000,
    "productCode": null,
    "modified": 1565654328000,
    "examScore": 56,
    "id": 4564568,
    "results": {
      "77": "361",
      "78": "365"
    },
    "account": "test"
  },
  "status": "SUCCESS"
}

Java代碼：

String jsonStr = "";
Object rootJson = JsonPath.read(jsonStr, "$");

2.遞歸層次遍歷JsonObjec，保存結點信息

Java代碼

ZTreeNode zTreeNode = new ZTreeNode();
zTreeNode.setId("$");
zTreeNode.setpId("root");
zTreeNode.setName("root");
zTreeNode.setDepth(0);
zTreeNode.setPath("$");
traverseTree(rootJson, zTreeNode, zTreeNodes);

    public static void traverseTree(Object rootJson, ZTreeNode zTreeNode, List<ZTreeNode> zTreeNodes) {
        if (rootJson instanceof Map) {
            for (Map.Entry<String, Object> stringObjectEntry : ((Map<String, Object>) rootJson).entrySet()) {
                ZTreeNode zTreeNodeTemp = new ZTreeNode();
                zTreeNodeTemp.setDepth(zTreeNode.getDepth() + 1);
                zTreeNodeTemp.setPath(zTreeNode.getPath() + "." + stringObjectEntry.getKey());
                zTreeNodeTemp.setId(zTreeNodeTemp.getPath());
                zTreeNodeTemp.setName(stringObjectEntry.getKey());
                zTreeNodeTemp.setpId(zTreeNode.getPath());
                zTreeNodes.add(zTreeNodeTemp);
                traverseTree(stringObjectEntry.getValue(), zTreeNodeTemp, zTreeNodes);
            }
        } else if (rootJson instanceof List) {
            List json = (List) rootJson;
            for (int i = 0; i < json.size(); i++) {
                Object obj = json.get(i);
                ZTreeNode zTreeNodeTemp = new ZTreeNode();
                zTreeNodeTemp.setDepth(zTreeNode.getDepth() + 1);
                zTreeNodeTemp.setPath(zTreeNode.getPath() + "[" + i + "]");
                zTreeNodeTemp.setId(zTreeNodeTemp.getPath());
                zTreeNodeTemp.setName(zTreeNode.getName() + "[" + i + "]");
                zTreeNodeTemp.setpId(zTreeNode.getPath());
                zTreeNodes.add(zTreeNodeTemp);
                traverseTree(obj, zTreeNodeTemp, zTreeNodes);
            }
        } else {
            // do nothing
        }
    }

3.利用zTree展示結點為可視化樹，點擊對應樹的結點即可獲取對應結點的JsonPath

前端代碼：

let zTreeObj;
// zTree 的參數配置
let setting = {
    data: {
        simpleData: {
            enable: true
        }
    },
    callback: {
        onClick: zTreeOnClick
    }
};
zTreeObj = $.fn.zTree.init($("#using_json"), setting, zNodes);
zTreeObj.expandAll(true);

4.擴展：將結點信息反向解析

遞歸解析zNodes+利用nestable插件可視化展示，效果如下：

前端代碼：

        let detailResult = JSON.parse(zNodes);
        let nestableContent = $('<ol class="dd-list"></ol>');
        let dataId = 0;
    // 遍歷解析Json
    function parseJson(jsonObj, nestableContent, dataId) {
        for (let key in jsonObj) {

            let element = jsonObj[key];
            if (element === null) {
                element = "null";
            }
            if (element.length > 0 && typeof (element) == "object" || typeof (element) == "object") {
                
                var li = $('<li class="dd-item" data-id="' + dataId + '"></li>');
                $(li).append('                   <div class="dd-handle">' +
                    '                       <span class="bg-muted p-xs b-r-sm">' + key + '</span>' +
                    '                   </div>').append('<ol class="dd-list"></ol>').appendTo(nestableContent);
                parseJson(element, $(li).children().eq(1), dataId);
            } else {
                dataId++;
                $('<li class="dd-item" data-id="' + dataId + '"></li>').append('                   <div class="dd-handle">' +
                    '                       <span class="bg-muted p-xs b-r-sm">' + key + '</span>' + element +
                    '                   </div>').appendTo(nestableContent);
            }

        }
    }

作者：京東科技 周波

來源：京東雲開發者社區 轉載請註明來源