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数组转为树形结构内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- js回调函数原理(关于JavaScript回调函数的深入理解)
- js使用canvas(JavaScript canvas实现七彩时钟效果)
- javascript 经典算法(JavaScript实现的七种排序算法总结推荐!)
- js数字时钟编程(JavaScript实现动态数字时钟)
- javascript检测内容改变了(JavaScript 检测文件的类型的方法)
- javascript将字符串转换成数组(如何将JavaScript将数组转为树形结构)
- jscanvas背景色(JavaScript canvas实现代码雨效果)
- javascript怎么生成html控件(JavaScript+html实现前端页面滑动验证2)
- javascript 虚拟滚动条(JavaScript实现可拖拽的进度条)
- js tab栏案例(JavaScript实现Tab栏切换特效)
- JavaScript中实现AES加密解密
- js防抖用法(JavaScript的防抖和节流案例)
- javascript中图片轮播效果代码(JavaScript实现简单的轮播图效果)
- canvas实现字体粒子爆炸特效(javascript canvas实现雨滴效果)
- javascript如何操作文档元素(JavaScript操作元素实例大全)
- javascript类型转换
- 香蕉(香蕉三种人不宜吃)
- 没钱可以快乐吗(没钱也能快乐吗)
- 快乐是什么(快乐就是)
- 东南亚有哪个国家(东南亚有哪个国家最发达)
- 东南亚安全吗(好不好挣钱)
- 潘长江小品《照亮全家福》台词剧本完整版(潘长江小品照亮全家福台词剧本完整版)
热门推荐
- 阿里云服务器清除密码(阿里云服务器忘记密码怎么办?阿里云ECS密码重置图文教程)
- 云服务器磁盘管理教程(云主机如何用虚拟磁盘扩容?)
- linq中let
- dedecms如何知道是否授权(DedeCMS Error Warning!提示信息的修改方法)
- nginx配置https转发规则(Nginx配置https原理及实现过程详解)
- 无法访问docker容器内的端口(docker容器中切换用户,提示权限不足的解决)
- JavaScript将具有父子关系的数据转化成树形结构,供tree控件使用
- vue图片组件使用方法(Vue图片裁剪组件实例代码)
- VPS跟云服务器的区别是什么?(VPS跟云服务器的区别是什么?)
- 织梦怎么添加评论(在织梦中添加腾讯微博最新动态信息的方法)