纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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

  2021-04-02 我要评论

本文实例讲述了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因为没一个方法都向上returnfor循环中一旦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.softyun.net/code/json

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

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

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

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

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

您可能感兴趣的文章:

相关文章

猜您喜欢

  • python 基于dlib库的人脸检测的实现

    想了解python 基于dlib库的人脸检测的实现的相关内容吗在本文为您仔细讲解的相关知识和一些Code实例欢迎阅读和指正我们先划重点:python,dlib,人脸检测,python,人脸检测下面大家一起来学习吧..
  • vue之组件内监控$store中定义变量的变化详解

    想了解vue之组件内监控$store中定义变量的变化详解的相关内容吗在本文为您仔细讲解的相关知识和一些Code实例欢迎阅读和指正我们先划重点:vue,监控,$store,定义变量下面大家一起来学习吧..

网友评论

Copyright 2020 www.fresh-weather.com 【世纪下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式