在JavaScript中从JSON构建树数组
假设我们在JavaScript中具有以下数组-
const arr = [{
"code": "2",
"name": "PENDING"
},
{
"code": "2.2",
"name": "PENDING CHILDREN"
},
{
"code": "2.2.01.01",
"name": "PENDING CHILDREN CHILDREN"
},
{
"code": "2.2.01.02",
"name": "PENDING CHILDREN CHILDREN02"
},
{
"code": "1",
"name": "ACTIVE"
},
{
"code": "1.1",
"name": "ACTIVE CHILDREN"
},
{
"code": "1.1.01",
"name": "ACTIVE CHILDREN CHILDREN"
}];我们需要编写一个包含一个这样的数组的JavaScript函数。函数应基于对象的“名称”属性从此数组构建树结构。
因此，对于上述数组，输出应如下所示：
const output = [{
"code": "2",
"name": "PENDING",
"children": [{
"code": "2.2",
"name": "PENDING CHILDREN",
"children": [{
"code": "2.2.01.01",
"name": "PENDING CHILDREN CHILDREN"
},
{
"code": "2.2.01.02",
"name": "PENDING CHILDREN CHILDREN02"
}]
}]
},
{
"code": "1",
"name": "ACTIVE",
"children": [{
"code": "1.1",
"name": "ACTIVE CHILDREN",
"children": [{
"code": "1.1.01",
"name": "ACTIVE CHILDREN CHILDREN"
}]
}]
}];示例
为此的代码将是-
const arr = [{
"code": "2",
"name": "PENDING"
},
{
"code": "2.2",
"name": "PENDING CHILDREN"
},
{
"code": "2.2.01.01",
"name": "PENDING CHILDREN CHILDREN"
},
{
"code": "2.2.01.02",
"name": "PENDING CHILDREN CHILDREN02"
},
{
"code": "1",
"name": "ACTIVE"
},
{
"code": "1.1",
"name": "ACTIVE CHILDREN"
},
{
"code": "1.1.01",
"name": "ACTIVE CHILDREN CHILDREN"
}];
const transformToTree = (arr, root = '') => {
let map = {}, last = [root], level = 0;
map[root] = {};
arr.forEach(el => {
let parent = root;
while (level && last[level].length >= el.code.length) {
level--;
};
parent = last[level];
level++;
last.length = level;
last.push(el.code);
map[el.code] = el;
map[parent].children = map[parent].children || [];
map[parent].children.push(el);
});
return map[root].children;
};
console.log(JSON.stringify(transformToTree(arr), undefined, 4));输出结果
控制台中的输出将是-
[
{
"code": "2",
"name": "PENDING",
"children": [
{
"code": "2.2",
"name": "PENDING CHILDREN",
"children": [
{
"code": "2.2.01.01",
"name": "PENDING CHILDREN CHILDREN"
},
{
"code": "2.2.01.02",
"name": "PENDING CHILDREN CHILDREN02"
}
]
}
]
},
{
"code": "1",
"name": "ACTIVE",
"children": [
{
"code": "1.1",
"name": "ACTIVE CHILDREN",
"children": [
{
"code": "1.1.01",
"name": "ACTIVE CHILDREN CHILDREN"
}
]
}
]
}
]