js 递归json树实现根据子id查父id的方法分析

本文实例讲述了js 递归json树实现根据子id查父id的方法。分享给大家供大家参考，具体如下：

最近做了一个类似用js实现思维导图的功能，作为思维导图，一定会有树状结构的数据产生，在操作里面的节点时会经常需要查找节点的父节点及父节点。

对于未知层级的树状数据，用for循环是无法实现的，因为不知道要循环几层，那么最合适的方法就是用js递归

界面结构：

json数据：

"orgTreeData":{
  "nodeId":"19A5B",
  "nodeName":"预分析用户：1313.85万人",
  "nodeType":"root",
  "expand":true,
  "dataCnt":13138494,
  "children":[
    {
      "nodeId":"19A5B_19A5C",
      "nodeName":"客户状态",
      "nodeType":"tag",
      "children":[
 {
   "nodeId":"19A5B_19A5C_19A5E",
   "nodeName":"包含(实名制停机,IPBUS帐户封锁停机)",
   "dataCnt":"0人",
   "nodeType":"domain",
   "counted":2,
   "children":[
     {
"nodeId":"19A5B_19A5C_19A5E_19A67",
"nodeName":"积分",
"nodeType":"tag",
"children":[
],
"expand":true,
"counted":0,
"condType":"1",
"dataType":1,
"propType":"1",
"propSql":"",
"labelId":"BLD00013",
"linked":false,
"linkedId":""
     },
     {
"nodeId":"19A5B_19A5C_19A5E_19A68",
"nodeName":"是否通信客户",
"nodeType":"tag",
"children":[
],
"expand":true,
"counted":0,
"condType":"3",
"dataType":1,
"propType":"4",
"propSql":"",
"labelId":"BLD00010",
"linked":false,
"linkedId":""
     }
   ],
   "expand":true,
   "expressType":"7",
   "expressValue1":[
     "17",
     "14"
   ],
   "expressValue2":"",
   "expressValue3":"17##14",
   "expressValue4":"实名制停机##IPBUS帐户封锁停机",
   "expressValue5":"实名制停机,IPBUS帐户封锁停机",
   "linked":false,
   "linkedId":""
 },
 {
   "nodeId":"19A5B_19A5C_19A60",
   "nodeName":"包含(营业销户)",
   "dataCnt":"0人",
   "nodeType":"domain",
   "counted":2,
   "children":[
     {
"nodeId":"19A5B_19A5C_19A60_19A69",
"nodeName":"入网归属地域",
"nodeType":"tag",
"children":[
  {
    "nodeId":"19A5B_19A5C_19A60_19A69_19A6A",
    "nodeName":"包含(鄂尔多斯,阿盟)",
    "dataCnt":"",
    "nodeType":"domain",
    "counted":0,
    "children":[
    ],
    "expand":true,
    "expressType":"7",
    "expressValue1":[
      "477",
      "482"
    ],
    "expressValue2":"",
    "expressValue3":"477##482",
    "expressValue4":"鄂尔多斯##阿盟",
    "expressValue5":"鄂尔多斯,阿盟",
    "linked":false,
    "linkedId":""
  }
],
"expand":true,
"counted":0,
"condType":"2",
"dataType":1,
"propType":"3",
"propSql":"1005",
"labelId":"BLD00017",
"linked":false,
"linkedId":""
     }
   ],
   "expand":true,
   "expressType":"7",
   "expressValue1":[
     "40"
   ],
   "expressValue2":"",
   "expressValue3":"40",
   "expressValue4":"营业销户",
   "expressValue5":"营业销户",
   "linked":false,
   "linkedId":""
 }
      ],
      "expand":true,
      "counted":0,
      "condType":"2",
      "dataType":1,
      "propType":"3",
      "propSql":"1002",
      "labelId":"BLD00004",
      "linked":false,
      "linkedId":""
    },
    {
      "nodeId":"19A5B_19A61",
      "nodeName":"全球通级别 && 全球通级别",
      "nodeType":"tag",
      "children":[
      ],
      "expand":true,
      "counted":0,
      "condType":"2",
      "dataType":1,
      "propType":"3",
      "propSql":"1004",
      "labelId":"BLD00008",
      "linked":true,
      "linkedId":"19A5B_19A64"
    },
    {
      "nodeId":"19A5B_19A62",
      "nodeName":"同证件号码数量",
      "nodeType":"tag",
      "children":[
      ],
      "expand":true,
      "counted":0,
      "condType":"1",
      "dataType":1,
      "propType":"1",
      "propSql":"",
      "labelId":"BLD00009",
      "linked":false,
      "linkedId":""
    }
  ]
}

我这个对象结构是按nodeId匹配的，每个下级为children数组。

如果我想点击任何一个节点根据节点nodeId得到它的父节点nodeId，就得把整个json树递归遍历一遍，知道找到这个节点，从而得到它的父节点

关于递归，一定要掌握好结束条件，懂得何时return，不然会出现返回不出值或者循环提前结束的情况。

js代码：

//传入参数：需要遍历的json，需要匹配的id
findPnodeId(data,nodeId){
    //设置结果
    let result;
    if (!data) {
 return;//如果data传空，直接返回
    }
    for (var i = 0; i < data.children.length; i++) {
 let item = data.children[i];
 if (item.nodeId == nodeId) {
     result=data.nodeId;
 //找到id相等的则返回父id
     return result;
 } else if (item.children && item.children.length > 0) {
 //如果有子集，则把子集作为参数重新执行本方法
     result= findPnodeId(item, nodeId);
 //关键，千万不要直接return本方法，不然即使没有返回值也会将返回return，导致最外层循环中断，直接返回undefined,要有返回值才return才对
     if(result){
  return result;
     }
 }
    }
    //如果执行循环中都没有return，则在此return
    return result;
}

总之，递归相当于上图中的轨迹查找。

条件执行到需要重新执行 findPnodeId 方法的地方开始一头扎进去，如果第下一次执行找到了符合条件的值，则return出来，返回上一层，下一层的 findPnodeId 方法结束，返回值，上一层的findPnodeId方法也就直接return结束了。

如果下一层方法进入循环第一次依然没有找到符合的值，如果还有子集，则会继续向更下一层进发；就像上图中的红线，直到没有子集才结束，所以千万不让直接在递归 findPnodeId 方法前直接return，也就是这样：

else if (item.children && item.children.length > 0) {
    return findPnodeId(item, nodeId);
}

这样会使 json在第一条树轨迹结束时（上图中的红色轨迹）如果找不到值强制 retrun undefined，因为没一个方法都向上return，for循环中，一旦return，会直接打断循环，使方法结束，结果是最底层的undefined 直接return到顶层，顶层直接将undefined return出来，根本没有走第234条线，所以一定要先判断一下是否返回值再return，像这样：

} else if (item.children && item.children.length > 0) {
    result= this.findPnodeId(item, nodeId);
    if(result){
 return result;
    }
}

那么如果方法前不写return会怎样？

是方法无法return，依然无法递归

PS：关于json操作，这里再为大家推荐几款比较实用的json在线工具供大家参考使用：

在线JSON代码检验、检验、美化、格式化工具：
http://tools.jb51.net/code/json

JSON在线格式化工具：
http://tools.jb51.net/code/jsonformat

在线XML/JSON互相转换工具：
http://tools.jb51.net/code/xmljson

json代码在线格式化/美化/压缩/编辑/转换工具：
http://tools.jb51.net/code/jsoncodeformat

在线json压缩/转义工具：
http://tools.jb51.net/code/json_yasuo_trans

更多关于Javascript相关内容可查看本站专题：《Javascript中json操作技巧总结》、《Javascript查找算法技巧总结》、《Javascript错误与调试技巧总结》、《Javascript数据结构与算法技巧总结》、《Javascript遍历算法与技巧总结》及《Javascript数学运算用法总结》

希望本文所述对大家Javascript程序设计有所帮助。

js 递归json树实现根据子id查父id的方法分析

JavaScript相关栏目本月热门文章