[英]Create tree structure array from flatter array
我有一个像这样更平坦的阵列
const arr =
[ { org_level_code: 'BBI', org_level_name: 'Bostwick', org_level_parent_code: 'toplevel', children: null }
, { org_level_code: 'CDI', org_level_name: 'BBi US', org_level_parent_code: 'BBI', children: null }
, { org_level_code: '60', org_level_name: '60 - Sidney1', org_level_parent_code: 'BBI/CDI', children: null }
, { org_level_code: 'BBC', org_level_name: 'BBi Canada', org_level_parent_code: 'BBI/CDI', children: null }
, { org_level_code: 'BBI-2', org_level_name: 'BBi U.S. ', org_level_parent_code: 'BBI/CDI', children: null }
, { org_level_code: 'DEPT', org_level_name: 'Dept', org_level_parent_code: 'BBI/CDI/BBI-2', children: null }
]
从这个数组我需要这样的数组
const data =
[ { org_level_code: 'BBI', org_level_name: 'Bostwick', org_level_parent_code: 'toplevel', children:
[ { org_level_code: 'CDI', org_level_name: 'BBi US', org_level_parent_code: 'BBI', children:
[ { org_level_code: 'BBC', org_level_name: 'BBi Canada', org_level_parent_code: 'BBI/CDI', children: null }
, { org_level_code: '60', org_level_name: '60 - Sidney1', org_level_parent_code: 'BBI/CDI', children: null }
, { org_level_code: 'BBI-2', org_level_name: 'BBi U.S. ', org_level_parent_code: 'BBI/CDI', children:
[ { org_level_code: 'DEPT', org_level_name: 'Dept', org_level_parent_code: 'BBI/CDI/BBI-2', children: null }
] } ] } ] } ]
正如您在示例"org_level_parent_code": "toplevel"
是父节点, "org_level_parent_code": "BBI"
是父节点的第二个节点,因为第一个节点与子节点有"org_level_code": "BBI"
和"org_level_parent_code": "BBI/CDI"
表示第三级。 这些斜线分隔的字符串与它们各自的父节点有关系。
最后一个字符串,例如斜线分隔字符串的BBI-2
与上述节点有关系。
注意 - 顶级节点可以是多个,例如 " org_level_parent_code "org_level_parent_code": "toplevel"
。
我真的很难做到这一点。 请帮忙。
您可以使用Map
来存储节点位置,如果下一个节点找到父节点,则推送到该父节点。
const arr = [{ "org_level_code": "BBI", "org_level_name": "Bostwick", "org_level_parent_code": "toplevel", "children": null }, { "org_level_code": "BBI", "org_level_name": "BBi US", "org_level_parent_code": "BBI", "children": null }, { "org_level_code": "60", "org_level_name": "60 - Sidney1", "org_level_parent_code": "BBI/BBI", "children": null }, { "org_level_code": "BBC", "org_level_name": "BBi Canada", "org_level_parent_code": "BBI/BBI", "children": null }, { "org_level_code": "BBI-2", "org_level_name": "BBi US ", "org_level_parent_code": "BBI/BBI", "children": null }, { "org_level_code": "DEPT", "org_level_name": "Dept", "org_level_parent_code": "BBI/BBI/BBI-2", "children": null }]; let map = new Map; let result = arr.shift(); for (const item of arr) { item.children??= [] let parentId = item.org_level_parent_code; map.set(parentId + "/" + item.org_level_code, item); map.get(parentId)?.children.push(item); } result.children = [map.get("BBI/BBI")]; console.log(result);
我们可以根据级别添加节点。 以下是解决方案:-
const orgGreenTree = (array) => {
let levels = [{}];
array.forEach(function(a) {
let level;
if (a.org_level_parent_code === 'toplevel') {
level = 0;
}
else {
level = (a.org_level_parent_code.match(/\//g) || []).length + 1;
}
levels.length = level + 1;
// console.log(level)
levels[level].children = levels[level].children || [];
levels[level].children.push(a);
levels[level + 1] = a;
});
return levels[0].children;
};
console.log(orgGreenTree(array));
这是使用Array#reduce()
的简洁、更通用的解决方案。
它累积到 Object 中,其属性是每个项目的children
数组的路径。 顶层项目被累积到toplevel
子数组中,这是最终的结果。
const arr = [{ org_level_code: 'BBI', org_level_name: 'Bostwick', org_level_parent_code: 'toplevel', children: null }, { org_level_code: 'CDI', org_level_name: 'BBi US', org_level_parent_code: 'BBI', children: null }, { org_level_code: '60', org_level_name: '60 - Sidney1', org_level_parent_code: 'BBI/CDI', children: null }, { org_level_code: 'BBC', org_level_name: 'BBi Canada', org_level_parent_code: 'BBI/CDI', children: null }, { org_level_code: 'BBI-2', org_level_name: 'BBi US ', org_level_parent_code: 'BBI/CDI', children: null }, { org_level_code: 'DEPT', org_level_name: 'Dept', org_level_parent_code: 'BBI/CDI/BBI-2', children: null }], result = arr.reduce((acc, item) => { const parentCode = item.org_level_parent_code; const childrenPath = `${parentCode === 'toplevel'? '': parentCode + '/'}${item.org_level_code}`; acc[childrenPath]??= []; (acc[parentCode]??= []).push({...item, children: acc[childrenPath] }) return acc; }, {}).toplevel console.log(JSON.stringify(result, null, 2));
.as-console-wrapper { max-height: 100%;important: top; 0; }
此解决方案不依赖于输入数组的顺序,即使尚未遇到父项,也会正确累积子项。
const arr = [ { org_level_code: 'DEPT', org_level_name: 'Dept', org_level_parent_code: 'BBI/CDI/BBI-2', children: null }, { org_level_code: 'CDI', org_level_name: 'BBi US', org_level_parent_code: 'BBI', children: null }, { org_level_code: '60', org_level_name: '60 - Sidney1', org_level_parent_code: 'BBI/CDI', children: null }, { org_level_code: 'BBI', org_level_name: 'Bostwick', org_level_parent_code: 'toplevel', children: null }, { org_level_code: 'BBC', org_level_name: 'BBi Canada', org_level_parent_code: 'BBI/CDI', children: null }, { org_level_code: 'BBI-2', org_level_name: 'BBi US ', org_level_parent_code: 'BBI/CDI', children: null } ], result = arr.reduce((acc, item) => { const parentCode = item.org_level_parent_code; const childrenPath = `${parentCode === 'toplevel'? '': parentCode + '/'}${item.org_level_code}`; acc[childrenPath]??= []; (acc[parentCode]??= []).push({...item, children: acc[childrenPath] }) return acc; }, {}).toplevel console.log(JSON.stringify(result, null, 2));
.as-console-wrapper { max-height: 100%;important: top; 0; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.