(转载)JavaScript递归查询 json 树 父子节点
在Json中知道某个属性名，想要确定该属性在Json树具体的节点，然后进行操作还是很麻烦的
可以用以下方法找到该属性所在的节点，和父节点
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>json-query</title>
<script type="text/javascript">
var json = [{
"MenuCode": "S0-3100-00",
"MenuAction": "TelPay",
"MenuName": "通讯费",
"subMenu": [{
"MenuCode": "S0-3100-01",
"MenuAction": "ChinaMobileTelBalQryInitAct",
"MenuName": "中国移动"
}, {
"MenuCode": "S0-3100-02",
"MenuAction": "UnicomTelBalQryInitAct",
"MenuName": "中国联通"
}, {
"MenuCode": "S0-3100-03",
"MenuAction": "TelecomTelBalQryInitAct",
"MenuName": "中国电信"
}]
}, {
"MenuCode": "S0-3200-00",
"MenuAction": "PowerPayInitAct",
"MenuName": "电费",
"subMenu": [{
"MenuCode": "S0-3210-00",
"MenuAction": "SmartPowerCardInitAct",
"MenuName": "智能电能表充值",
"subMenu": [{
"MenuCode": "S0-3210-01",
"MenuAction": "SmartPowerCardPayInitAct",
"MenuName": "购电卡充值"
}, {
"MenuCode": "S0-3210-02",
"MenuAction": "SmartPowerCardQueryInitAct",
"MenuName": "购电卡查询"
}, {
"MenuCode": "S0-3210-03",
"MenuAction": "SmartPowerCardRewriteInitAct",
"MenuName": "购电卡补写"
}]
}, {
"MenuCode": "S0-3220-00",
"MenuAction": "ElectricChargeInitAct",
"MenuName": "电能表无卡充值",
"subMenu": [{
"MenuCode": "S0-3220-01",
"MenuAction": "ElectricChargeQryInitAct",
"MenuName": "购电充值"
}, {
"MenuCode": "S0-3220-02",
"MenuAction": "ElectricChargeMsgRegInitAct",
"MenuName": "短信订阅"
}]
}]
}, {
"MenuCode": "S0-3300-00",
"MenuAction": "HeatingPayInitAct",
"MenuName": "取暖费",
"subMenu": [{
"MenuCode": "S0-3300-04",
"MenuAction": "JinNengHeatingQryInitAct",
"MenuName": "天津能源缴费"
}]
}, {
"MenuCode": "S0-3400-00",
"MenuAction": "CablePayInitAct",
"MenuName": "有线电视费",
"subMenu": [{
"MenuCode": "S0-3400-01",
"MenuAction": "GuangDianCableQryInitAct",
"MenuName": "广电有线缴费"
}, {
"MenuCode": "S0-3400-02",
"MenuAction": "TedaCableQryInitAct",
"MenuName": "泰达有线缴费"
}]
}, {
"MenuCode": "S0-3000-01",
"MenuAction": "ETCLoadInitAct",
"MenuName": "ETC卡充值"
}, {
"MenuCode": "S0-3500-00",
"MenuAction": "WaterPayInitAct",
"MenuName": "水费",
"subMenu": [{
"MenuCode": "S0-3500-01",
"MenuAction": "JinNanWaterQryInitAct",
"MenuName": "津南水费缴费"
}]
}, {
"MenuCode": "S0-3000-03",
"MenuAction": "GasPayInitAct",
"MenuName": "燃气费"
}, {
"MenuCode": "S0-3000-04",
"MenuAction": "CommonPayInitAct",
"MenuName": "通用缴费"
}, {
"MenuCode": "S0-3600-00",
"MenuAction": "CityCardInitAct",
"MenuName": "城市一卡通充值",
"subMenu": [{
"MenuCode": "S0-3600-01",
"MenuAction": "CityCardPayInitAct",
"MenuName": "城市卡充值"
}, {
"MenuCode": "S0-3600-02",
"MenuAction": "CityCardRewriteInitAct",
"MenuName": "城市卡补写卡"
}]
}, {
"MenuCode": "S0-3000-05",
"MenuAction": "SocialSecurityQryInitAct",
"MenuName": "社保缴费"
}];
</script> <script type="text/javascript">
/*
* 递归查询JSON树 父子节点
*/
var parentNode = null;
var node = null; /**
* 根据NodeID查找当前节点以及父节点
*
* @param {[type]}
* @param {[type]}
* @return {[type]}
*/
function getNode(json, nodeId) { //1.第一层 root 深度遍历整个JSON
for (var i = 0; i < json.length; i++) {
if (node) {
break;
}
var obj = json[i];
//没有就下一个
if (!obj || !obj.MenuCode) {
continue;
} //2.有节点就开始找，一直递归下去
if (obj.MenuCode == nodeId) {
//找到了与nodeId匹配的节点，结束递归
node = obj;
break;
} else {
//3.如果有子节点就开始找
if (obj.subMenu) {
//4.递归前，记录当前节点，作为parent 父亲
parentNode = obj;
//递归往下找
getNode(obj.subMenu, nodeId);
} else {
//跳出当前递归，返回上层递归
continue;
}
}
} //5.如果木有找到父节点，置为null，因为没有父亲
if (!node) {
parentNode = null;
} //6.返回结果obj
return {
parentNode: parentNode,
node: node
};
} //批量查询
var query = [
'S0-3400-00', 'S0-3100-03', 'S0-3210-02', 'S0-3210-03', 'S0-3000-05', 'S0-3300-04'
]; //打印结果
for (var i = 0; i < query.length; i++) {
node = null;
parentNode = null;
var obj = getNode(json, query[i]);
console.log("查询nodeId:" + query[i] + ", 结果:" + obj.node.MenuCode + ",name:" + obj.node.MenuName + " -> 父级:" + (obj.parentNode ? obj.parentNode.MenuName : '木有父级!'));
}
</script>
</head> <body>
</body> </html>
转载自:
Json树递归Js查询Json父子节点
(转载)JavaScript递归查询 json 树 父子节点的更多相关文章
- json树递归js查询json父子节点
上代码,直接另存为html打开,看console控制台就可以看到效果了 <!DOCTYPE html> <html lang="en"> <head& ...
- JavaScript根据Json数据来做的模糊查询功能
类似于百度搜索框的模糊查找功能 需要有有已知数据,实现搜索框输入字符,然后Js进行匹配,然后可以通过鼠标点击显示的内容,把内容显示在搜索框中 当然了,正则只是很简单的字符匹配,不具备多么复杂的判断 & ...
- JavaScript通过父节点ID递归生成JSON树
JavaScript通过父节点ID递归生成JSON树: · 实现思路:通过递归实现(第一次递归的时候查询出所有的父节点,然后通过当前父节点id不断地去查询所有子节点,直到递归完毕返回) · 代码示 ...
- JSON树节点的增删查改
最近了解到使用json字符串存到数据库的一种存储方式,取出来的json字符串可以进行相应的节点操作 故借此机会练习下递归,完成对json节点操作对应的工具类. 介绍一下我使用的依赖 复制代码 < ...
- JSON相关知识，转载：删除JSON中数组删除操作
一:JSON是什么 JSONg格式:对象是一个无序的“名称/值”对的集合. 对象以括号开始,括号结束. 名称冒号分隔值. "名称/值"之间用逗号分隔 例: var people = ...
- 学习javascript数据结构(四)——树
前言 总括: 本文讲解了数据结构中的[树]的概念,尽可能通俗易懂的解释树这种数据结构的概念,使用javascript实现了树,如有纰漏,欢迎批评指正. 原文博客地址:学习javascript数据结构( ...
- zTree实现删除树子节点
zTree实现删除树子节点 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树</tit ...
- FastJson：Json树的CRUD操作方法实现
准备工作:json字符串 [{ "id": 1, "code": "FLOW_NODE_1", "name": &quo ...
- 探索未知种族之osg类生物---状态树与渲染树以及节点树之间的关系
节点树 首先我们来看一个场景构建的实例,并通过它来了解一下“状态节点”StateGraph 和“渲染叶”RenderLeaf 所构成的状态树,“渲染台”RenderStage 和“渲染元”Render ...
随机推荐
- IE8,11的iframe高度自适应
兼容模式:function iFrameHeightTzinfo() { var ifm= document.getElementById("iframe_tzinfo"); // ...
- Java面试题之线程与进程的区别
进程是操作系统分配资源的最小单元: 线程是操作系统调度的最小单元: 一个程序至少有一个进程:一个进程至少有一个线程 每个进程对应一个JVM实例,多个线程共享JVM里的堆: 线程不能看做独立应用,而进程 ...
- The reference to entity "characterEncoding" must end with the ';' delimiter (Mybatis + Mysql)
数据源配置时加上编码转换格式后出问题了: The reference to entity "characterEncoding" must end with the ';' del ...
- VMware 11 安装Mac 10.9
VMware Workstation 11, 10, 9 and 8 Unlocker to Run Mac OS X Guests in Windows 8.1 and 7 VM10装Mac OS ...
- ubuntu通过cifs-utils访问Windows共享目录
ubuntu旧一点的版本如:12.0x是用smbclient访问window共享的,但比较新的版本如:16.04是通过cifs-utils访问Windows共享目录 同样道理先安装: apt-get ...
- 【CF559C】 Gerald and Giant Chess（计数，方案数DP，数论）
题意:给出一个棋盘为h*w,现在要从(1,1)到(h,w),其中有n个黑点不能走,问有多少种可能从左上到右下 (1 ≤ h, w ≤ 105, 1 ≤ n ≤ 2000),答案模10^9+7 思路:从 ...
- 转 Python执行系统命令的方法
传送门 Python执行系统命令的方法 http://www.linux-field.com/?p=15 Python中执行系统命令常见方法有两种: 两者均需 import os (1) os.sys ...
- Firmware 加载原理分析【转】
转自:http://blog.csdn.net/dxdxsmy/article/details/8669840 [-] 原理分析 实现机制 总结 前言 前段时间移植 wifi 驱动到 Androi ...
- hdu 1796(容斥原理+状态压缩)
How many integers can you find Time Limit: 12000/5000 MS (Java/Others) Memory Limit: 65536/32768 ...
- R语言table()函数
R语言table()函数比较有用,两个示例尤其是混淆矩阵这个案例比较有用: 例子一:统计频次 z<-c(1,2,2,4,2,7,1,1);z1<-table(z);summary(z1); ...