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如何实现异步任务(JavaScript 中如何实现并发控制)
- javascript怎么生成html控件(JavaScript+html实现前端页面滑动验证2)
- js搜索功能的实现(前端JavaScript实现本地模糊搜索功能的方法实例)
- mvc JavaScriptResult的用法
- js数组去重的十种方法(JavaScript常用数组去重实战源码)
- javascript如何跨域
- js防抖用法(JavaScript的防抖和节流案例)
- ASP.NET使用JavaScriptSerializer实现序列化与反序列化
- vue走马灯特效(Javascript结合Vue实现对任意迷宫图片的自动寻路)
- 使用javascript数组循环(JavaScript数组reduce方法的语法与实例解析)
- JavaScript生成GUID的方法
- javascript 经典算法(JavaScript实现的七种排序算法总结推荐!)
- javascript设置鼠标(JavaScript实现鼠标控制自由移动的窗口)
- qt和js相互调用(QT与javascript交互数据的实现)
- javascript制作表格(JavaScript实现动态表格效果)
- javascript如何操作文档元素(JavaScript操作元素实例大全)
- 入秋后的第二场苹果发布会来了 全新M1系列芯片登场(入秋后的第二场苹果发布会来了)
- 苹果正式发布自研芯片M1 5nm 32核心 彻底放弃Intel(苹果正式发布自研芯片M1)
- 苹果自研芯片跑分对比 A16芯片排名靠后,M1系列霸榜(苹果自研芯片跑分对比)
- X86处理器的梦魇 苹果M1自研芯片到底有多强(苹果M1自研芯片到底有多强)
- 泰剧《爱欲之神》Boom kitkong和Great合体杂志(泰剧爱欲之神Boomkitkong和Great合体杂志)
- 素人恋爱综艺火药味十足 男生为赢得芳心集体扯头花,真是出好戏(素人恋爱综艺火药味十足)
热门推荐
- vue实现树形结构菜单(vue递归实现三级菜单)
- mac鼠标怎么实现触摸板功能(鼠标滚轮事件和Mac触控板双指事件)
- php中isset函数有什么功能(PHP中的empty、isset、isnull的区别与使用实例)
- SQLServer获取临时表所有列名或是否存在指定列名的方法(SQLServer获取临时表所有列名或是否存在指定列名的方法)
- python 模式识别(python实现全盘扫描搜索功能的方法)
- 宝塔面板端口一般设置多少合适(宝塔面板设置了防盗链不生效如何解决)
- php查找文件存在(php判断目录存在的简单方法)
- vue创建dom节点(Vue批量更新dom的实现步骤)
- python怎么装opencv(Python基于opencv实现的简单画板功能示例)
- mysql利用数据库日志恢复数据(MySQL通过binlog恢复数据)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9