javascript将字符串转换成数组(如何将JavaScript将数组转为树形结构)
类别:编程学习 浏览量:2405
时间:2022-03-29 10:26:59 javascript将字符串转换成数组
如何将JavaScript将数组转为树形结构1.需求后台给了一个这样的数据让咱前端去转换为树形结构(没有重复数据)。不多说,先来看看给了一个怎样的数组数据,转换为怎样的树形结构。
服务器传过来的数组
const arr = [ [ {"deptId":"D019", "deptName":"销售部"}, {"deptId":"D019101", "deptName":"华北销售中心"} ],[ {"deptId":"D083", "deptName":"音乐事业部"} ],[ {"deptId":"D027", "deptName":"杭州研究院"}, {"deptId":"D027048", "deptName":"技术工程事业部"}, {"deptId":"D027048002", "deptName":"项目管理中心"} ],[ {"deptId":"D027", "deptName":"杭州研究院"}, {"deptId":"D027048", "deptName":"技术工程事业部"} ],[ {"deptId":"D027", "deptName":"杭州研究院"}, {"deptId":"D027048", "deptName":"技术工程事业部"} ] ]
最终转换为
const arr = [ { deptId: 'D019', deptName: '销售部', children: [{ deptId: 'D019101', deptName: '华北销售中心', children: [], }] }, { deptId: 'D083', deptName: '音乐事业部', children: [] }, { deptId: 'D027', deptName: '杭州研究院', children: [{ deptId: 'D027048', deptName: '技术工程事业部', children: [{ deptId: 'D027048002', deptName: '项目管理中心', children: [] }] }] }, ]
const [treeData, setTreeData] = useState([]); console.log(treeData); //treeData为最终需要的树形结构,(在我本地浏览器打印出来是正确的) useEffect(() => { const str = '[[{"deptId":"D019","deptName":"销售部"},{"deptId":"D019101","deptName":"华北销售中心"}],[{"deptId":"D019","deptName":"销售部"},{"deptId":"D019101","deptName":"华北销售中心"}],[{"deptId":"D083","deptName":"音乐事业部"}],[{"deptId":"D027","deptName":"杭州研究院"},{"deptId":"D027048","deptName":"技术工程事业部"},{"deptId":"D027048002","deptName":"项目管理与效能中心"}],[{"deptId":"D027","deptName":"杭州研究院"},{"deptId":"D027048","deptName":"技术工程事业部"}],[{"deptId":"D027","deptName":"杭州研究院"},{"deptId":"D027048","deptName":"技术工程事业部"}]]'; const arr = JSON.parse(str).flat(); //扁平化 let newArr = []; noRepeat(arr).length && noRepeat(arr).forEach(it => { appendChild(it, newArr); }); }, []) const noRepeat = (arr) => { //去重 let newobj = {}; return arr.reduce((preVal, curVal) => { newobj[curVal.deptId] ? '' : newobj[curVal.deptId] = preVal.push(curVal); return preVal }, []); } const appendChild = (item, newArr) => { if(!newArr.find(it => item.deptId.indexOf(it.deptId) > -1)) { //所有一级部门 newArr.push({ deptId: item.deptId, deptName: item.deptName, children: [], }); setTreeData(newArr); }else { appendOtherChild(item, newArr); } } const appendOtherChild = (item, newArr) => { newArr.map(it => { if(item.deptId.indexOf(it.deptId) > -1 && item.deptId.length === it.deptId.length+3) { it.children.push({ deptId: item.deptId, deptName: item.deptName, children: [], }) }else { appendOtherChild(item, it.children); } }); setTreeData(newArr); }
可能这些数据和你的不太一样,但是逻辑可能八九不离十,可以好好看一下这几十行代码
到此这篇关于如何将JavaScript将数组转为树形结构的文章就介绍到这了,更多相关JavaScript数组转为树形结构内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- Javascript计算密码的强度
- js的模块模式设计(如何理解JavaScript模块化)
- javascript中定义数组的方法(JavaScript中数组sort方法的基本使用与踩坑记录)
- javascript里字符串描述(JavaScript字符串操作的四个实用技巧)
- javascript中需要注意的几个细节
- javascript文件解压(JavaScript 如何在线解压 ZIP 文件)
- javascript变量值做函数名(JavaScript中变量提升和函数提升实例详解)
- js绘制平滑路径(如何利用Javascript生成平滑曲线详解)
- js怎么做一个计时器(JavaScript实现简单计时器)
- js三级联动列表(基于JavaScript实现年月日三级联动)
- JavaScript 阻止超链接跳转的操作方法(多种写法)(JavaScript 阻止超链接跳转的操作方法多种写法)
- javascript编程中的promise(JavaScript如何利用Promise控制并发请求个数)
- 百度地图获取api过程(JavaScript接入百度地图API的方法步骤)
- javascript如何获取后台数据(JavaScript实现异步获取表单数据)
- javascript中window对象
- javascript动作事件有哪些(JavaScript之事件循环案例讲解)
- 城市记忆之上海 最难忘的是老弄堂里的市井味道(城市记忆之上海)
- 太鸡贼了,这老小区轻松搞定了停车问题(这老小区轻松搞定了停车问题)
- 太鸡贼了,这老小区轻松搞定了停车问题(这老小区轻松搞定了停车问题)
- 节日我在岗|警景相融 平安相伴(节日我在岗警景相融)
- 战 疫 时刻 致敬每一位石化大学的 守护者(战疫时刻)
- 老弄堂里的市井味道(老弄堂里的市井味道)
热门推荐
- python递归深度遍历多叉树(Python实现二叉树的常见遍历操作总结7种方法)
- dedecms插件解析(dedecms文章评论功能用法分析)
- ucenter安装配置(使用ucenter实现多站点同步登录的讲解)
- sqlserver字段增加删减(关于SQL Server中bit类型字段增删查改的一些事)
- 排序算法口诀php(PHP快速排序算法实现的原理及代码详解)
- sqlserver分组查询(sql server如何利用开窗函数over进行分组统计)
- 存储过程中如何获取错误信息
- net微服务架构部署方式(基于Apache的支持.NET2.0的Web服务器搭建)
- vue 为什么使用虚拟dom(Vue虚拟Dom到真实Dom的转换)
- css伪元素是属性吗(CSS :befor :after 伪元素的巧妙用法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9