递归解析Json，实现生成可视化Tree+快速获取JsonPath

内部平台的一个小功能点的实现过程，分享给大家：
递归解析Json，可以实现生成可视化Tree+快速获取JsonPath。
步骤：
1.利用JsonPath读取根，获取JsonObject
2.递归层次遍历JsonObjec，保存结点信息
3.利用zTree展示结点为可视化树，点击对应树的结点即可获取对应结点的JsonPath
1.利用JsonPath读取根，获取JsonObject

示例Json：

1. {
2.   "errorMessage": null,
3.   "errorCode": null,
4.   "dates": {
5.     "tradeAmt": null,
6.     "riskLevel": "LEVEL30",
7.     "optSelected": {
8.       "77": [
9.         {
10.           "optionContent": "20-50万元",
11.           "productCode": null,
12.           "created": null,
13.           "optionOrder": null,
14.           "modified": null,
15.           "id": 361,
16.           "optionScore": 8,
17.           "isInvalid": 1
18.         }
19.       ],
20.       "78": [
21.         {
22.           "optionContent": "资产50-500万元，无债务或债务较轻",
23.           "productCode": null,
24.           "created": null,
25.           "optionOrder": null,
26.           "modified": null,
27.           "id": 365,
28.           "optionScore": 6,
29.           "isInvalid": 1
30.         }
31.       ]
32.     },
33.     "riskInfoResult": {
34.       "optLetter": "A",
35.       "mqOrder": "1",
36.       "residenceCountryCode": null,
37.       "taxReason": null,
38.       "residenceCountryName": null,
39.       "residenceCountryNameEn": null,
40.       "countryNameEn": null,
41.       "taxInfoCode": null,
42.       "taxInfoIsCompleted": true,
43.       "taxInfoIsRight": true,
44.       "countryCode": null,
45.       "taxId": null,
46.       "countryName": null,
47.       "taxReasonInt": null
48.     },
49.     "created": 1565654328000,
50.     "questions": [
51.       {
52.         "questionContent": "您的职业？",
53.         "productCode": null,
54.         "created": 1498630051000,
55.         "options": null,
56.         "questionSource": "BUSINESS",
57.         "modified": 1498630051000,
58.         "id": 75,
59.         "isInvalid": 1,
60.         "questionType": 1,
61.         "order": 1
62.       },
63.       {
64.         "questionContent": "您的主要收入来源是？",
65.         "productCode": null,
66.         "created": 1498630051000,
67.         "options": null,
68.         "questionSource": "BUSINESS",
69.         "modified": 1498630051000,
70.         "id": 76,
71.         "isInvalid": 1,
72.         "questionType": 1,
73.         "order": 2
74.       }
75.     ],
76.     "serialCode": "123",
77.     "isInvalid": 1,
78.     "expireTime": 1628783999000,
79.     "productCode": null,
80.     "modified": 1565654328000,
81.     "examScore": 56,
82.     "id": 4564568,
83.     "results": {
84.       "77": "361",
85.       "78": "365"
86.     },
87.     "account": "test"
88.   },
89.   "status": "SUCCESS"
90. }

复制代码

Java代码：

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

复制代码

2.递归层次遍历JsonObjec，保存结点信息

Java代码

1. ZTreeNode zTreeNode = new ZTreeNode();
2. zTreeNode.setId("$");
3. zTreeNode.setpId("root");
4. zTreeNode.setName("root");
5. zTreeNode.setDepth(0);
6. zTreeNode.setPath("$");
7. traverseTree(rootJson, zTreeNode, zTreeNodes);

复制代码

1.     public static void traverseTree(Object rootJson, ZTreeNode zTreeNode, List<ZTreeNode> zTreeNodes) {
2.         if (rootJson instanceof Map) {
3.             for (Map.Entry<String, Object> stringObjectEntry : ((Map<String, Object>) rootJson).entrySet()) {
4.                 ZTreeNode zTreeNodeTemp = new ZTreeNode();
5.                 zTreeNodeTemp.setDepth(zTreeNode.getDepth() + 1);
6.                 zTreeNodeTemp.setPath(zTreeNode.getPath() + "." + stringObjectEntry.getKey());
7.                 zTreeNodeTemp.setId(zTreeNodeTemp.getPath());
8.                 zTreeNodeTemp.setName(stringObjectEntry.getKey());
9.                 zTreeNodeTemp.setpId(zTreeNode.getPath());
10.                 zTreeNodes.add(zTreeNodeTemp);
11.                 traverseTree(stringObjectEntry.getValue(), zTreeNodeTemp, zTreeNodes);
12.             }
13.         } else if (rootJson instanceof List) {
14.             List json = (List) rootJson;
15.             for (int i = 0; i < json.size(); i++) {
16.                 Object obj = json.get(i);
17.                 ZTreeNode zTreeNodeTemp = new ZTreeNode();
18.                 zTreeNodeTemp.setDepth(zTreeNode.getDepth() + 1);
19.                 zTreeNodeTemp.setPath(zTreeNode.getPath() + "[" + i + "]");
20.                 zTreeNodeTemp.setId(zTreeNodeTemp.getPath());
21.                 zTreeNodeTemp.setName(zTreeNode.getName() + "[" + i + "]");
22.                 zTreeNodeTemp.setpId(zTreeNode.getPath());
23.                 zTreeNodes.add(zTreeNodeTemp);
24.                 traverseTree(obj, zTreeNodeTemp, zTreeNodes);
25.             }
26.         } else {
27.             // do nothing
28.         }
29.     }

复制代码

3.利用zTree展示结点为可视化树，点击对应树的结点即可获取对应结点的JsonPath


前端代码：

1. let zTreeObj;
2. // zTree 的参数配置
3. let setting = {
4.     data: {
5.         simpleData: {
6.             enable: true
7.         }
8.     },
9.     callback: {
10.         onClick: zTreeOnClick
11.     }
12. };
13. zTreeObj = $.fn.zTree.init($("#using_json"), setting, zNodes);
14. zTreeObj.expandAll(true);

复制代码

4.扩展：将结点信息反向解析

递归解析zNodes+利用nestable插件可视化展示，效果如下：

前端代码：

1.         let detailResult = JSON.parse(zNodes);
2.         let nestableContent = $('<ol ></ol>');
3.         let dataId = 0;
4.     // 遍历解析Json
5.     function parseJson(jsonObj, nestableContent, dataId) {
6.         for (let key in jsonObj) {
8.             let element = jsonObj[key];
9.             if (element === null) {
10.                 element = "null";
11.             }
12.             if (element.length > 0 && typeof (element) == "object" || typeof (element) == "object") {
13.                
14.                 var li = $('<li  data-id="' + dataId + '"></li>');
15.                 $(li).append('                   ' +
16.                     '                       ' + key + '' +
17.                     '                   ').append('<ol ></ol>').appendTo(nestableContent);
18.                 parseJson(element, $(li).children().eq(1), dataId);
19.             } else {
20.                 dataId++;
21.                 $('<li  data-id="' + dataId + '"></li>').append('                   ' +
22.                     '                       ' + key + '' + element +
23.                     '                   ').appendTo(nestableContent);
24.             }
26.         }
27.     }

复制代码

作者：京东科技 周波
来源：京东云开发者社区 转载请注明来源

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！