(转载)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 ...
随机推荐
- docker (centOS 7) 使用笔记4 - etcd服务
本次测试的系统包含centos 7.2 64 bit,centos 7.3 64 bit 1. 安装 yum -y install etcd 2. 配置 此处一共准备了3台机器(10.10.10.10 ...
- python语言基础问题汇总
问题汇总 问题分类 怎么在一个python脚本里调用另一个python脚本 把两个脚本filea.py 和 fileb.py 放在同一个目录下,然后在filea.py的开头写: import file ...
- OpenJudge 东方14ACM小组 / 20170123 02 岛屿
总时间限制: 40000ms 单个测试点时间限制: 4000ms 内存限制: 128000kB 描述 从前有一座岛屿,这座岛屿是一个长方形,被划为N*M的方格区域,每个区域都有一个确定的高度.不 ...
- 求N维前缀和
转载自http://blog.csdn.net/jzhang1/article/details/50528549#comments 膜拜 #include <iostream> #incl ...
- 视音频数据处理入门：RGB、YUV像素数据处理【转】
转自:http://blog.csdn.net/leixiaohua1020/article/details/50534150 ==================================== ...
- jmeter登录禅道案例
下载jmeter,配置环境变量 变量名:JMETER_HOME 变量值:C:\Program Files\apache-jmeter-2.11 变量名:CLASSPATH 变量值:%JMETER_HO ...
- 使用vue-element-admin框架开发时遇到的跨域问题
之前 使用js和jquery开发时也碰到过接口请求时的跨域问题, 但是在使用vue-element-admin开发也碰到这个问题,而且不能使用之前的方法解决,查过不少资料,找到一个很好的方法解决了这个 ...
- 饼系列—圈饼 doughnut
chartControl属性 ApplicationSettings: Name:控件名字 AccessibleDescription: ??? AccessibleName:??? Accessib ...
- Codeforces Gym 100431A Achromatic Number 欧拉回路
原题链接:http://codeforces.com/gym/100431/attachments/download/2421/20092010-winter-petrozavodsk-camp-an ...
- xcode创建一个工程的多个taget,便于测试和发布多个版本
背景:很多时候,我们需要在一个工程中创立多个target,也就是说我们希望同一份代码可以创建两个应用,放到模拟器或者真机上,或者是,我们平时有N多人合作开发,当测试的时候,在A这里装了一遍测A写的那块 ...