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: []
}]
}]
},
]
2.上代码（在reactHooks中开发）
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数组转为树形结构内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！