内部平台的一个小功能点的实现过程，分享给大家：
递归解析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} 91 92
Java代码：
1String jsonStr = ""; 2Object rootJson = JsonPath.read(jsonStr, "$"); 3 4
2.递归层次遍历JsonObjec，保存结点信息
Java代码
1ZTreeNode zTreeNode = new ZTreeNode(); 2zTreeNode.setId("$"); 3zTreeNode.setpId("root"); 4zTreeNode.setName("root"); 5zTreeNode.setDepth(0); 6zTreeNode.setPath("$"); 7traverseTree(rootJson, zTreeNode, zTreeNodes); 8 9
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 } 30 31
3.利用zTree展示结点为可视化树，点击对应树的结点即可获取对应结点的JsonPath
前端代码：
1let zTreeObj; 2// zTree 的参数配置 3let setting = { 4 data: { 5 simpleData: { 6 enable: true 7 } 8 }, 9 callback: { 10 onClick: zTreeOnClick 11 } 12}; 13zTreeObj = $.fn.zTree.init($("#using_json"), setting, zNodes); 14zTreeObj.expandAll(true); 15 16
4.扩展：将结点信息反向解析
递归解析zNodes+利用nestable插件可视化展示，效果如下：
前端代码：
1 let detailResult = JSON.parse(zNodes); 2 let nestableContent = $('<ol class="dd-list"></ol>'); 3 let dataId = 0; 4 // 遍历解析Json 5 function parseJson(jsonObj, nestableContent, dataId) { 6 for (let key in jsonObj) { 7 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 class="dd-item" data-id="' + dataId + '"></li>'); 15 $(li).append(' <div class="dd-handle">' + 16 ' <span class="bg-muted p-xs b-r-sm">' + key + '</span>' + 17 ' </div>').append('<ol class="dd-list"></ol>').appendTo(nestableContent); 18 parseJson(element, $(li).children().eq(1), dataId); 19 } else { 20 dataId++; 21 $('<li class="dd-item" data-id="' + dataId + '"></li>').append(' <div class="dd-handle">' + 22 ' <span class="bg-muted p-xs b-r-sm">' + key + '</span>' + element + 23 ' </div>').appendTo(nestableContent); 24 } 25 26 } 27 }
作者：京东科技 周波
来源：京东云开发者社区 转载请注明来源