当前位置: 首页 > news >正文

递归解析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;// 遍历解析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 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);}}}

作者:京东科技 周波

来源:京东云开发者社区 转载请注明来源

相关文章:

递归解析Json,实现生成可视化Tree+快速获取JsonPath | 京东云技术团队

内部平台的一个小功能点的实现过程&#xff0c;分享给大家&#xff1a; 递归解析Json&#xff0c;可以实现生成可视化Tree快速获取JsonPath。 步骤&#xff1a; 1.利用JsonPath读取根&#xff0c;获取JsonObject 2.递归层次遍历JsonObjec&#xff0c;保存结点信息 3.利用z…...

GraceUI相关的 知识

调试工具&#xff1a;UniApp提供了一些调试工具和插件&#xff0c;如uni-app-cli、调试器等&#xff0c;可以帮助你更好地定位和解决问题。同时&#xff0c;使用浏览器的开发者工具或模拟器的调试功能&#xff0c;可以更直观地观察页面效果和调试代码。 对于 GraceUI 的普通版本…...

三十二、【进阶】hash索引结构

1、hash索引结构 &#xff08;1&#xff09;简述&#xff1a; hash索引&#xff0c;就是采用一定的hash算法&#xff0c;将键值换算成新的hash值&#xff0c;映射到对应的槽位上&#xff0c;然后存储在hash表中。 &#xff08;2&#xff09;图示&#xff1a; 2、hash索引结构…...

如果有一天AI能自主编程了,程序员还有前途吗?

人们一直想知道人工智能&#xff08;AI&#xff09;等新技术将如何影响就业。如今的一个大问题是&#xff1a;人工智能会接管程序员的角色吗&#xff1f; 编程主要是关于人们学习计算机语言&#xff0c;这需要大量的时间和努力。但人工智能正在改变这一点。像 GPT-4 这样的系统…...

网络安全:个人信息保护,企业信息安全,国家网络安全的重要性

在当前的数字化时代&#xff0c;无论是个人&#xff0c;企业&#xff0c;还是国家&#xff0c;都会面临严重的网络安全威胁。网络安全不仅涉及我们的日常生活&#xff0c;也涉及到社会的稳定和国家的安全。这就需要我们高度重视网络安全&#xff0c;强化个人信息保护&#xff0…...

自动驾驶学习笔记(二)——Apollo入门

#Apollo开发者# 学习课程的传送门如下&#xff0c;当您也准备学习自动驾驶时&#xff0c;可以和我一同前往&#xff1a; 《自动驾驶新人之旅》免费课程—> 传送门 《2023星火培训【感知专项营】》免费课程—>传送门 文章目录 前言 Ubuntu Linux文件系统 Linux指令…...

Flask 进行 Web 开发时,常见的错误

ImportError: No module named ‘flask’ 错误描述&#xff1a; 这个错误表示 Python 找不到 Flask 模块。解决方法&#xff1a; 确保已经正确安装了 Flask 模块。你可以使用以下命令来安装 Flask&#xff1a;pip install flaskAttributeError: ‘module’ object has no attri…...

【项目】5.1阻塞和非阻塞、同步和异步 5.2Unix、Linux上的五种IO模型

5.1阻塞和非阻塞、同步和异步&#xff08;网络IO&#xff09; 典型的一次IO的两个阶段是什么&#xff1f;数据就绪和数据读写 数据就绪&#xff1a;根据IO操作的就绪状态 阻塞非阻塞 数据读写&#xff1a;根据应用程序和内核的交互方式 同步异步 陈硕&#xff1a;在处理IO的…...

Unity可视化Shader工具ASE介绍——3、ASE的Shader类型介绍

大家好&#xff0c;我是阿赵。这里继续介绍Unity可视化Shader编辑插件ASE的用法。   上一篇介绍了节点的输入输出节点。这一篇来介绍一下不同的Shader类型的区别。 一、修改Shader类型 之前介绍创建Shader的时候&#xff0c;曾经说过可以选择Shader的类型。 其实这个类型是…...

国内手机安装 Google Play 服务 (GMS/Google Mobile Services)

目录 1. 国内手机安装 Google Play 服务 (GMS/Google Mobile Services)1.1. 什么是 GMS1.2. 国内手机只需要安装 3 个 APP1.2.1. Google Services Framework 服务框架1.2.2. Google Play Services1.2.3. Google Play Store 应用商店 1.3. 问题1.3.1. 谷歌地图闪退 2. 小米手机 …...

数据结构与算法-(7)---栈的应用-(4)后缀表达式求值

&#x1f308;write in front&#x1f308; &#x1f9f8;大家好&#xff0c;我是Aileen&#x1f9f8;.希望你看完之后&#xff0c;能对你有所帮助&#xff0c;不足请指正&#xff01;共同学习交流. &#x1f194;本文由Aileen_0v0&#x1f9f8; 原创 CSDN首发&#x1f412; 如…...

[VIM]spcaevim

Home | SpaceVim SpaceVim - 知乎 关于Vim/Neovim/SpaceVim的一些思考 - 知乎 vim高配版(1) – SpaceVim 简介 SpaceVim 是国内的一个大佬将一些NB的插件整合到一起的一个插件包. 一键式安装, 功能强大. 官网参见 Home | SpaceVim vim高配版(2) – vimplus 简介 vimplu…...

Android中的RxJava入门及常用操作符

文章目录 1.定义2.作用3.特点4.使用4.1创建被观察者&#xff08;Observable&#xff09;4.2创建观察者&#xff08;Observer&#xff09;4.3订阅&#xff08;Subscribe&#xff09;4.4Dispose 5.操作符5.1操作符类型5.2just操作符5.2链式调用5.3 fromArray操作符5.4 fromIterab…...

【数字化转型】10大数字化转型能力成熟度模型03

一、前言 数字化转型是数据化能力建设的目标和价值,作为一个新兴的课题,目前为止并未出现一个统一的数字化转型成熟度模型。不同的企业和机构,根据自身的发展和认知,推出了自己的企业级或者准行业级标准。这些标准具有很强的参考意义,作者收集和整理了相关的标准和规范,整…...

【算法与数据结构】--前言

欢迎来到《算法与数据结构》专栏&#xff01;这个专栏将引领您进入计算机科学领域中最重要、最精彩的领域之一&#xff1a;算法与数据结构。不管您是一名初学者&#xff0c;还是已经拥有一定编程经验的开发者&#xff0c;都可以从这里找到有益的知识和实践。 在计算机科学的世…...

R²决定系数

R 2 R^2 R2&#xff08;决定系数&#xff09;是一个用于衡量统计模型拟合数据的指标&#xff0c;通常用于线性回归分析。它表示模型所解释的因变量&#xff08;目标变量&#xff09;方差的比例&#xff0c;范围从0到1。 更具体地说&#xff0c; R 2 R^2 R2告诉我们模型能够解释…...

软件工程与计算总结(一)软件工程基础

国庆快乐&#xff0c;今天开始更新《软件工程与计算&#xff08;卷二&#xff09;》的重要知识点内容~ 一.软件 1.软件独立于硬件 早期的软件是为了计算机硬件在研究型项目中而开发制造的&#xff0c;人们使用专门针对于硬件的指令码和汇编语言编写&#xff0c;这也是最早软件…...

SpringBoot-黑马程序员-学习笔记(一)

8.pom文件中的parent 我们使用普通maven项目导入依赖时&#xff0c;通常需要在导入依赖的时候指定版本号&#xff0c;而springboot项目不需要指定版本号&#xff0c;会根据当前springboot的版本来下载对应的最稳定的依赖版本。 点开pom文件会看到这个&#xff1a; 继承了一个…...

Apache Tomcat安装、运行

介绍 Apache Tomcat是下面多个规范的一个开源实现&#xff1a;Jakarta Servlet、Jakarta Server Pages、Jakarta Expression Language、Jakarta WebSocket、Jakarta Annotations 和 Jakarta Authentication。这些规范是 Jakarta EE 平台的一部分。 Jakarta EE 平台是Java EE平…...

聊聊分布式架构05——[NIO基础]BIO到NIO的演进

目录 I/O I/O模型 BIO示例 BIO与NIO比较 NIO的三大核心 NIO核心之缓冲区 Buffer常用子类&#xff1a; Buffer常用API Buffer中的重要概念 NIO核心之通道 FileChannel 类 FileChannel常用方法 NIO核心之选择器 概述 应用 NIO非阻塞原理分析 服务端流程 客户端…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

观成科技:隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

Qt Http Server模块功能及架构

Qt Http Server 是 Qt 6.0 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

安宝特案例丨Vuzix AR智能眼镜集成专业软件,助力卢森堡医院药房转型,赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

AI+无人机如何守护濒危物种?YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...