資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會科學
時尚研究
法律研究從 JSON 中在 JavaScript 中構建樹形陣列
假設在 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 函式，該函式接受一個這樣的陣列。該函式應根據物件的“name”屬性從這個陣列構建一個樹形結構。
因此，對於上述陣列，輸出應類似如下 −
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"
}
]
}
]
}
]
更新於： 2020 年 11 月 24 日
2K+ 瀏覽次數
廣告