珠海市网站建设开发公司,谷歌官网首页,长沙网站建设软件,制作网站的软件手机版内部平台的一个小功能点的实现过程#xff0c;分享给大家#xff1a;
递归解析Json#xff0c;可以实现生成可视化Tree快速获取JsonPath。
步骤#xff1a;
1.利用JsonPath读取根#xff0c;获取JsonObject
2.递归层次遍历JsonObjec#xff0c;保存结点信息
3.利用z…内部平台的一个小功能点的实现过程分享给大家
递归解析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, ListZTreeNode zTreeNodes) {if (rootJson instanceof Map) {for (Map.EntryString, Object stringObjectEntry : ((MapString, 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 classdd-list/ol);let dataId 0;// 遍历解析Jsonfunction 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 classdd-item data-id dataId /li);$(li).append( div classdd-handle span classbg-muted p-xs b-r-sm key /span /div).append(ol classdd-list/ol).appendTo(nestableContent);parseJson(element, $(li).children().eq(1), dataId);} else {dataId;$(li classdd-item data-id dataId /li).append( div classdd-handle span classbg-muted p-xs b-r-sm key /span element /div).appendTo(nestableContent);}}}作者京东科技 周波 来源京东云开发者社区 转载请注明来源
