javascirpt 将扁平化数组转换成树形结构
后台返回两种情况的数据:一种是没有包含上下级关系,需要自己手动处理一下上下级关系,通过parentId或pid来判断上下级关系,具体代码如下:let list = {msg: "操作成功",code: 200,data: [{deptId: 100,parentId: 0,ancestors: "0",deptName: "若依科技",orderNum: "0",parentName: nu
·
后台返回两种情况的数据:一种是没有包含上下级关系,需要自己手动处理一下上下级关系,通过parentId或pid来判断上下级关系,具体代码如下:
let list = {
msg: "操作成功",
code: 200,
data: [
{
deptId: 100,
parentId: 0,
ancestors: "0",
deptName: "若依科技",
orderNum: "0",
parentName: null,
children: [],
},
{
deptId: 101,
parentId: 100,
deptName: "深圳总公司",
orderNum: "1",
parentName: null,
children: [],
},
{
deptId: 102,
parentId: 100,
deptName: "长沙分公司",
orderNum: "2",
parentName: null,
children: [],
},
{
deptId: 103,
parentId: 101,
deptName: "研发部门",
orderNum: "1",
parentName: null,
children: [],
},
{
deptId: 104,
parentId: 101,
deptName: "市场部门",
orderNum: "2",
parentName: null,
children: [],
},
{
deptId: 105,
parentId: 101,
deptName: "测试部门",
orderNum: "3",
parentName: null,
children: [],
},
{
deptId: 106,
parentId: 101,
deptName: "财务部门",
orderNum: "4",
parentName: null,
children: [],
},
{
deptId: 107,
parentId: 101,
deptName: "运维部门",
orderNum: "5",
parentName: null,
children: [],
},
{
deptId: 108,
parentId: 102,
ancestors: "0,100,102",
deptName: "市场部门",
orderNum: "1",
parentName: null,
children: [],
},
{
deptId: 109,
parentId: 102,
ancestors: "0,100,102",
deptName: "财务部门",
orderNum: "2",
parentName: null,
children: [],
},
],
};
function formatToTree(ary, pid) {
return ary
.filter((item) =>
// 如果没有父id(第一次递归的时候)将所有父级查询出来
// item.parentId === 0 就是最顶层
pid === undefined ? item.parentId === 0 : item.parentId === pid
)
.map((item) => {
// 通过父节点ID查询所有子节点
item.children = formatToTree(ary, item.deptId);
return item;
});
}
console.log(formatToTree(list.data));
第二种情况就是包含上下级关系,但是返回的数据和组件要求的数据有一些偏差,需要自己处理一下,比如增加一些属性之类,代码如下:
let data = [
{
id: "dd420051522843febd203b05230f4024",
parentId: "",
children: [
{
id: "017b480f678b4f76b914e50d54846d2f",
parentId: "dd420051522843febd203b05230f4024",
children: [],
},
{
id: "05fc4f2c5f7840f9b369c489aced419c",
parentId: "dd420051522843febd203b05230f4024",
children: [],
},
],
},
{
id: "dd420051522843febd203b05230f40242",
parentId: "",
children: [
{
id: "017b480f678b4f76b914e50d54846d2f2",
parentId: "dd420051522843febd203b05230f40242",
children: [],
},
],
},
];
const fTreeLoop = (data) => {
let newData = [];
for (const [index, item] of data.entries()) {
const { children, id } = item;
newData[index] = Object.assign({}, item, { title: id, children: [] });
if (children && children.length > 0) {
newData[index].children = fTreeLoop(children);
}
}
return newData;
};
console.log(fTreeLoop(data));
更多推荐
所有评论(0)