符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
这篇文章主要介绍了js中如何使用递归json树实现根据子id查父id的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
创新互联长期为上1000家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为呼中企业提供专业的成都网站设计、做网站,呼中网站改版等技术服务。拥有十多年丰富建站经验和众多成功案例,为您定制开发。
最近做了一个类似用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; } }
感谢你能够认真阅读完这篇文章,希望小编分享的“js中如何使用递归json树实现根据子id查父id的方法”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!