js 遍历树的层级关系的实现
1.遍历树的层级关系
1)先整理数据
2)找到id和数据的映射关系
3)然后找到父节点的数据,进行存储
test() {
const list = [
{ id: "", parentId: "", children: [] },
{ id: "", parentId: "", children: [] },
{ id: "", parentId: "", children: [] },
{ id: "", parentId: "", children: [] },
{ id: "", parentId: "", children: [] }
];
const mapList = [];
const tree = [];
list.forEach(item => { mapList[item.id] = item;
});
list.forEach(item => {
const parentNode = mapList[item.parentId];
if (!parentNode) {
tree.push(item);
} else {
parentNode.children.push(item);
}
});
console.log("tree", tree);
},
js 遍历树的层级关系的实现的更多相关文章
- Web中树形数据(层级关系数据)的实现—以行政区树为例
在Web开发中常常遇到树形数据的操作,如菜单.组织机构.行政区(省.市.县)等具有层级关系的数据. 以下以行政区为例说明树形数据(层级关系数据)的存储以及实现,效果如图所看到的. 1 数据库表结构设计 ...
- 树状结构Java模型、层级关系Java模型、上下级关系Java模型与html页面展示
树状结构Java模型.层级关系Java模型.上下级关系Java模型与html页面展示 一.业务原型:公司的组织结构.传销关系网 二.数据库模型 很简单,创建 id 与 pid 关系即可.(pid:pa ...
- Vue 使用Spread.js没有层级关系(隐藏与显示)
Vue 使用Spread.js没有层级关系(隐藏与显示) 1.vue会给元素加一个监控属性.去掉 spread.js没有层级关系过半是column中值的问题
- HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次)
HTML中DOM对象的属性和方法的层级关系是怎样的?(目录即层次) 一.总结 一句话总结:目录就是测试题 1.document取得元素(get element)的方式有哪几种? 解答:四种,分别是id ...
- 用D3.js画树状图
做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同 网上有很多这种数据可视化展示的js控件,我这里选择 ...
- 【吐血分享】SQL Server With As 递归获取层级关系数据
纯洁的一周又开始了,今天看到一则新闻,笑尿了,和袁友们一起娱乐下 最近两月在做基于Saas模式的人力资源管理产品,平常数据库设计我经常会遇到如下需求场景: 以前商城类网站在设计类型表的时候,设计成单表 ...
- java遍历树(深度遍历和广度遍历
java遍历树如现有以下一颗树:A B B1 B11 B2 B22 C C ...
- 路径字符串数据转化为树型层级对象,path to json tree
由于项目中使用了react 及 ant-design ,在使用tree树型控件时,需要 类似下面的数据, const treeData = [{ title: '0-0', key: '0-0', c ...
- 探索未知种族之osg类生物---状态树与渲染树以及节点树之间的关系
节点树 首先我们来看一个场景构建的实例,并通过它来了解一下“状态节点”StateGraph 和“渲染叶”RenderLeaf 所构成的状态树,“渲染台”RenderStage 和“渲染元”Render ...
随机推荐
- 小D课堂 - 零基础入门SpringBoot2.X到实战_第9节 SpringBoot2.x整合Redis实战_40、Redis工具类封装讲解和实战
笔记 4.Redis工具类封装讲解和实战 简介:高效开发方式 Redis工具类封装讲解和实战 1.常用客户端 https://redisdesktop.com/download ...
- Centos7 卸载 Nginx 并重新安装 Nginx
1) 卸载nginx [root@locahost /]# yum remove nginx 2) 查看nginx是否还存在 [root@localhost /]# which nginx 3)重新 ...
- 惠普打印机和扫描仪修复医生 HP Print and Scan Doctor
https://support.hp.com/cn-zh/topic/printscandoctor-printing-problems http://ftp.hp.com/pub/printers/ ...
- web项目访问被拦截
如图,一启动就出现下图登录界面 原因很简单就是被拦截了.pom.xml中引入了下面的包,注释掉就可以了.当然如果用了shiro等权限框架也可能出现类似问题.谁copy进来的,盘他. <!-- h ...
- 算法习题---4-10洪水(UVa815)
一:题目 有一个n*m(<=n,m<=)的网格,每个格子都是边长为10米的正方形,网格四周是无限大的墙壁.输入每个格子的海拔高度,以及网格内雨水的总体积,输出水位的海拔高度以及有多少百分比 ...
- 【grafana报错】Singlestat "Error: Multiple Series Error"
这个错误是因为grafana中的单值面板在同一个时刻读到了多个值.需要检查面板的json源码,检查其expr字段中的promql表达式是否会在同一时刻返回多个值. https://github.com ...
- Java使用Jsoup获得新闻联播所有文字稿
Jsoup的maven坐标: <!-- https://mvnrepository.com/artifact/org.jsoup/jsoup --> <dependency> ...
- 【JS新手教程】replace替换一个字符串中所有的某单词
JS中的replace方法可以替换一个字符串中的单词.语句的格式是: 需要改的字符串.replace(字符串或正则表达式,替换成的字符串) 如果第一个参数用字符串,默认是找到该字符串中的第一个匹配的字 ...
- C#Json数据反序列化为Dictionary并根据关键字获取指定的值
Json数据: { "dataSet": { "header": { ", "errorInfo": "HTTP请求错误 ...
- LM_ReadImgMode.js PC单页轮播读图模式组件,零依赖!
LM_ReadImgMode.js PC单页轮播读图模式组件,零依赖! github:http://dtdxrk.github.io/LM-ReadImgMode/ TXT 1.全新的2.0版本,脱离 ...