在Json中知道某个属性名，想要确定该属性在Json树具体的节点，然后进行操作还是很麻烦的

可以用以下方法找到该属性所在的节点，和父节点

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>json-query</title>
  7.     <script type="text/javascript">
  8.     var json = [{
  9.         "MenuCode": "S0-3100-00",
  10.         "MenuAction": "TelPay",
  11.         "MenuName": "通讯费",
  12.         "subMenu": [{
  13.             "MenuCode": "S0-3100-01",
  14.             "MenuAction": "ChinaMobileTelBalQryInitAct",
  15.             "MenuName": "中国移动"
  16.         }, {
  17.             "MenuCode": "S0-3100-02",
  18.             "MenuAction": "UnicomTelBalQryInitAct",
  19.             "MenuName": "中国联通"
  20.         }, {
  21.             "MenuCode": "S0-3100-03",
  22.             "MenuAction": "TelecomTelBalQryInitAct",
  23.             "MenuName": "中国电信"
  24.         }]
  25.     }, {
  26.         "MenuCode": "S0-3200-00",
  27.         "MenuAction": "PowerPayInitAct",
  28.         "MenuName": "电费",
  29.         "subMenu": [{
  30.             "MenuCode": "S0-3210-00",
  31.             "MenuAction": "SmartPowerCardInitAct",
  32.             "MenuName": "智能电能表充值",
  33.             "subMenu": [{
  34.                 "MenuCode": "S0-3210-01",
  35.                 "MenuAction": "SmartPowerCardPayInitAct",
  36.                 "MenuName": "购电卡充值"
  37.             }, {
  38.                 "MenuCode": "S0-3210-02",
  39.                 "MenuAction": "SmartPowerCardQueryInitAct",
  40.                 "MenuName": "购电卡查询"
  41.             }, {
  42.                 "MenuCode": "S0-3210-03",
  43.                 "MenuAction": "SmartPowerCardRewriteInitAct",
  44.                 "MenuName": "购电卡补写"
  45.             }]
  46.         }, {
  47.             "MenuCode": "S0-3220-00",
  48.             "MenuAction": "ElectricChargeInitAct",
  49.             "MenuName": "电能表无卡充值",
  50.             "subMenu": [{
  51.                 "MenuCode": "S0-3220-01",
  52.                 "MenuAction": "ElectricChargeQryInitAct",
  53.                 "MenuName": "购电充值"
  54.             }, {
  55.                 "MenuCode": "S0-3220-02",
  56.                 "MenuAction": "ElectricChargeMsgRegInitAct",
  57.                 "MenuName": "短信订阅"
  58.             }]
  59.         }]
  60.     }, {
  61.         "MenuCode": "S0-3300-00",
  62.         "MenuAction": "HeatingPayInitAct",
  63.         "MenuName": "取暖费",
  64.         "subMenu": [{
  65.             "MenuCode": "S0-3300-04",
  66.             "MenuAction": "JinNengHeatingQryInitAct",
  67.             "MenuName": "天津能源缴费"
  68.         }]
  69.     }, {
  70.         "MenuCode": "S0-3400-00",
  71.         "MenuAction": "CablePayInitAct",
  72.         "MenuName": "有线电视费",
  73.         "subMenu": [{
  74.             "MenuCode": "S0-3400-01",
  75.             "MenuAction": "GuangDianCableQryInitAct",
  76.             "MenuName": "广电有线缴费"
  77.         }, {
  78.             "MenuCode": "S0-3400-02",
  79.             "MenuAction": "TedaCableQryInitAct",
  80.             "MenuName": "泰达有线缴费"
  81.         }]
  82.     }, {
  83.         "MenuCode": "S0-3000-01",
  84.         "MenuAction": "ETCLoadInitAct",
  85.         "MenuName": "ETC卡充值"
  86.     }, {
  87.         "MenuCode": "S0-3500-00",
  88.         "MenuAction": "WaterPayInitAct",
  89.         "MenuName": "水费",
  90.         "subMenu": [{
  91.             "MenuCode": "S0-3500-01",
  92.             "MenuAction": "JinNanWaterQryInitAct",
  93.             "MenuName": "津南水费缴费"
  94.         }]
  95.     }, {
  96.         "MenuCode": "S0-3000-03",
  97.         "MenuAction": "GasPayInitAct",
  98.         "MenuName": "燃气费"
  99.     }, {
  100.         "MenuCode": "S0-3000-04",
  101.         "MenuAction": "CommonPayInitAct",
  102.         "MenuName": "通用缴费"
  103.     }, {
  104.         "MenuCode": "S0-3600-00",
  105.         "MenuAction": "CityCardInitAct",
  106.         "MenuName": "城市一卡通充值",
  107.         "subMenu": [{
  108.             "MenuCode": "S0-3600-01",
  109.             "MenuAction": "CityCardPayInitAct",
  110.             "MenuName": "城市卡充值"
  111.         }, {
  112.             "MenuCode": "S0-3600-02",
  113.             "MenuAction": "CityCardRewriteInitAct",
  114.             "MenuName": "城市卡补写卡"
  115.         }]
  116.     }, {
  117.         "MenuCode": "S0-3000-05",
  118.         "MenuAction": "SocialSecurityQryInitAct",
  119.         "MenuName": "社保缴费"
  120.     }];
  121.     </script>
  122.  
  123.     <script type="text/javascript">
  124.     /*
  125.      * 递归查询JSON树 父子节点
  126.      */
  127.     var parentNode = null;
  128.     var node = null;
  129.  
  130.     /**
  131.      * 根据NodeID查找当前节点以及父节点
  132.      *
  133.      * @param  {[type]}
  134.      * @param  {[type]}
  135.      * @return {[type]}
  136.      */
  137.     function getNode(json, nodeId) { 
  138.  
  139.         //1.第一层 root 深度遍历整个JSON
  140.         for (var i = 0; i < json.length; i++) {
  141.             if (node) {
  142.                 break;
  143.             }
  144.             var obj = json[i];
  145.             //没有就下一个
  146.             if (!obj || !obj.MenuCode) {
  147.                 continue;
  148.             }
  149.  
  150.             //2.有节点就开始找，一直递归下去
  151.             if (obj.MenuCode == nodeId) {
  152.                 //找到了与nodeId匹配的节点，结束递归
  153.                 node = obj;
  154.                 break;
  155.             } else {
  156.                 //3.如果有子节点就开始找
  157.                 if (obj.subMenu) {
  158.                     //4.递归前，记录当前节点，作为parent 父亲
  159.                     parentNode = obj;
  160.                     //递归往下找
  161.                     getNode(obj.subMenu, nodeId);
  162.                 } else {
  163.                     //跳出当前递归，返回上层递归
  164.                     continue;
  165.                 }
  166.             }
  167.         }
  168.  
  169.         //5.如果木有找到父节点，置为null，因为没有父亲
  170.         if (!node) {
  171.             parentNode = null;
  172.         }
  173.  
  174.         //6.返回结果obj
  175.         return {
  176.             parentNode: parentNode,
  177.             node: node
  178.         };
  179.     }
  180.  
  181.     //批量查询
  182.     var query = [
  183.         'S0-3400-00', 'S0-3100-03', 'S0-3210-02', 'S0-3210-03', 'S0-3000-05', 'S0-3300-04'
  184.     ];
  185.  
  186.     //打印结果
  187.     for (var i = 0; i < query.length; i++) {
  188.         node = null;
  189.         parentNode = null;
  190.         var obj = getNode(json, query[i]);
  191.         console.log("查询nodeId:" + query[i] + ", 结果:" + obj.node.MenuCode + ",name:" + obj.node.MenuName + " -> 父级:" + (obj.parentNode ? obj.parentNode.MenuName : '木有父级!'));
  192.     }
  193.     </script>
  194. </head>
  195.  
  196. <body>
  197. </body>
  198.  
  199. </html>

转载自:

Json树递归Js查询Json父子节点

(转载)JavaScript递归查询 json 树 父子节点的更多相关文章

  1. json树递归js查询json父子节点

    上代码,直接另存为html打开,看console控制台就可以看到效果了 <!DOCTYPE html> <html lang="en"> <head& ...

  2. JavaScript根据Json数据来做的模糊查询功能

    类似于百度搜索框的模糊查找功能 需要有有已知数据,实现搜索框输入字符,然后Js进行匹配,然后可以通过鼠标点击显示的内容,把内容显示在搜索框中 当然了,正则只是很简单的字符匹配,不具备多么复杂的判断 & ...

  3. JavaScript通过父节点ID递归生成JSON树

    JavaScript通过父节点ID递归生成JSON树: · 实现思路:通过递归实现(第一次递归的时候查询出所有的父节点,然后通过当前父节点id不断地去查询所有子节点,直到递归完毕返回)   · 代码示 ...

  4. JSON树节点的增删查改

    最近了解到使用json字符串存到数据库的一种存储方式,取出来的json字符串可以进行相应的节点操作 故借此机会练习下递归,完成对json节点操作对应的工具类. 介绍一下我使用的依赖 复制代码 < ...

  5. JSON相关知识，转载：删除JSON中数组删除操作

    一:JSON是什么 JSONg格式:对象是一个无序的“名称/值”对的集合. 对象以括号开始,括号结束. 名称冒号分隔值. "名称/值"之间用逗号分隔 例: var people = ...

  6. 学习javascript数据结构(四)——树

    前言 总括: 本文讲解了数据结构中的[树]的概念,尽可能通俗易懂的解释树这种数据结构的概念,使用javascript实现了树,如有纰漏,欢迎批评指正. 原文博客地址:学习javascript数据结构( ...

  7. zTree实现删除树子节点

    zTree实现删除树子节点 1.实现源码 <!DOCTYPE html> <html> <head> <title>zTree实现基本树</tit ...

  8. FastJson：Json树的CRUD操作方法实现

    准备工作:json字符串 [{ "id": 1, "code": "FLOW_NODE_1", "name": &quo ...

  9. 探索未知种族之osg类生物---状态树与渲染树以及节点树之间的关系

    节点树 首先我们来看一个场景构建的实例,并通过它来了解一下“状态节点”StateGraph 和“渲染叶”RenderLeaf 所构成的状态树,“渲染台”RenderStage 和“渲染元”Render ...

随机推荐

  1. 在SpringBoot中对SpringSecurity的基本使用

    参考文献: Spring Security Architecture What is authentication in Spring Security? Spring Security是一个能够为基 ...

  2. 【CF1028C】Rectangles（线段树）

    题意: n<=1e5,abs(x[i]),abs(y[i]<=1e9 思路:这是正解 离散后线段树强打,数据结构越学越傻 #include<cstdio> #include&l ...

  3. LOJ#2302. 「NOI2017」整数

    $n \leq 1000000$个操作:一,给$x$加上$a*2^b$:二,问$x$的某个二进制位$k$.$b,k \leq 30n$,$|a| \leq 1e9$. 30暴露了一切..可以把30个二 ...

  4. json键的不能像值一样拼写的问题

    今天碰到了一个json的键不能拼写的问题 解决方法是  先把json对象作为一个字符串拼写  然后再通过eavl函数转为json对象 $(".select_date").each( ...

  5. 【Visual Studio】error: /ZI”和“/Gy-”命令行选项不兼容（转）

    原文转自 http://bbs.100home.net/view/4206.html [问题说明]vc6项目用vs2015打开时遇到的错误 [解决方法]项目属性->c/c++->常规-&g ...

  6. gerrit 安装

    http://blog.csdn.net/ljchlx/article/details/21988471

  7. 关于[WinError 10054] 远程主机强迫关闭了一个现有的连接。

    之前一直用python实现qq邮箱自动发送,都弄的好好的,然后今天一打开,就出现如题的错误,百度了许多,说,可能发送邮件次数过多,被当作是攻击,建议换个邮箱,换了也不行, 最后用手机给电脑分享Wifi ...

  8. 小程序使用wxParse插件解析html标签图片间距问题

    转自:https://www.cnblogs.com/likun123/p/9543376.html 小程序解析html标签,就需要用到wxParse啦.但是在解析连续图片的时候,会发现图片之间会有间 ...

  9. xamarin android 获取根证书代码

    Java.Security.KeyStore keyStore = Java.Security.KeyStore.GetInstance("AndroidCAStore"); ke ...

  10. Shadow Map阴影贴图技术之探 【转】

    这两天勉勉强强把一个shadowmap的demo做出来了.参考资料多,苦头可不少.Shadow Map技术是目前与Shadow Volume技术并行的传统阴影渲染技术,而且在游戏领域可谓占很大优势.本 ...