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数组转为树形结构内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- pyqt5加载chrome浏览器(PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例)
- js闭包可以解决哪些问题(JavaScript中let避免闭包造成问题)
- javascriptloop教程(JavaScript中的AOP编程的基本实现)
- javascript的作用域详解精简版(浅谈JavaScript 中的延迟加载属性模式)
- javascript写计算器教程(基于JavaScript实现简易计算器)
- javascript里字符串描述(JavaScript字符串操作的四个实用技巧)
- javascript作用域实例(JavaScript defineProperty如何实现属性劫持)
- js回调函数原理(关于JavaScript回调函数的深入理解)
- javascript制作表格(JavaScript实现动态表格效果)
- html5 canvas 特效(JavaScript canvas实现流星特效)
- jquery五子棋javascript(原生JavaScript实现简单五子棋游戏)
- javascript如何判断类型(JavaScript如何优化逻辑判断代码详解)
- javascript执行类的所有方法(Javascript中异步等待的深入理解)
- js实现div(javascript拖曳互换div的位置实现示例)
- web中如何预防xss攻击(详解前端安全之JavaScript防http劫持与XSS)
- js淘宝购物车效果代码(JavaScript实现电商平台商品细节图)
- 他是梁山最早的头目,江湖人称 旱地忽律 ,宋江几乎将其遗忘(他是梁山最早的头目)
- 梁山创始人杜迁,为何不受宋江待见,只排名83位(梁山创始人杜迁)
- 法国面包(法国面包法棍)
- 微信(微信分身)
- 双十二(双十二和双十一哪个划算)
- 佛肚竹盆景的养护之道(佛肚竹盆景的养护之道)
热门推荐
- python里面的time如何用(详解python:time模块用法)
- dede软件标签(发掘dede自带的google sitemap功能)
- python中怎样将字符串倒序(python字符串循环左移)
- dedecms中修改图片(让dedecms织梦后台支持上传bmp格式的图片的教程)
- sql server入门教程(SQL Server AlwaysOn读写分离配置图文教程)
- linux rsync 迁移数据(如何使用Linux的rsync)
- mysql索引失效怎么办(MySQL选错索引的原因以及解决方案)
- tensorflow做识别分类(使用TensorFlow实现二分类的方法示例)
- sqlserver查询信息表(SQL Server中Table字典数据的查询SQL示例代码)
- laravel模型使用技巧(提高Laravel应用性能方法详解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9