資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究將樹形結構從資料庫格式轉換為 HTML 格式
比如，我們有一個此類的物件陣列 −
const arr = [
{"id":7,"name":"Kuwait","parentId":2},
{"id":4,"name":"Iraq","parentId":2},
{"id":10,"name":"Qatar","parentId":2},
{"id":2,"name":"Middle East","parentId":1},
{"id":3,"name":"Bahrain","parentId":2},
{"id":6,"name":"Jordan","parentId":2},
{"id":8,"name":"Lebanon","parentId":2},
{"id":1,"name":"Africa/Middle East","parentId":null}, {"id":5,"name":"Israel","parentId":2},
{"id":9,"name":"Oman","parentId":2}
];我們需要編制一個 Javascript 函式，包含一個此類的陣列。然後這個函式應準備一個新的陣列，其中包含按父母進行分組的物件。
所以，輸出應類似 −
const output = [
{"id":55,"text":"Africa/Middle East","children":[
{"id":2,"text":"Middle East","children":
[{"id":7,"name":"Kuwait","children":[]},
{"id":4,"name":"Iraq","children":[]},
{"id":10,"name":"Qatar","children":[]},
{"id":3,"name":"Bahrain","children":[]},
{"id":6,"name":"Jordan","children":[]},
{"id":8,"name":"Lebanon","children":[]},
{"id":5,"name":"Israel","children":[]},
{"id":9,"name":"Oman","children":[]}]}
];示例
const arr = [
{"id":7,"name":"Kuwait","parentId":2},
{"id":4,"name":"Iraq","parentId":2},
{"id":10,"name":"Qatar","parentId":2},
{"id":2,"name":"Middle East","parentId":1},
{"id":3,"name":"Bahrain","parentId":2},
{"id":6,"name":"Jordan","parentId":2},
{"id":8,"name":"Lebanon","parentId":2},
{"id":1,"name":"Africa/Middle East","parentId":null}, {"id":5,"name":"Israel","parentId":2},
{"id":9,"name":"Oman","parentId":2} ];
const transformTree = (data, root = null) => {
const res = [];
const map = {};
data.forEach((el) => {
el.children = map[el.id] && map[el.id].children || [];
map[el.id] = el; if (el.parentId === root) {
res.push(el);
}
else {
map[el.parentId] = map[el.parentId] || {};
map[el.parentId].children = map[el.parentId].children || []; map[el.parentId].children.push(el);
};
});
return res;
};
console.log(JSON.stringify(transformTree(arr), undefined, 4));輸出
而在控制檯中的輸出將為 −
[
{ "id": 1,
"name": "Africa/Middle East",
"parentId": null,
"children": [
{
"id": 2,
"name": "Middle East",
"parentId": 1,
"children": [
{
"id": 7,
"name": "Kuwait",
"parentId": 2,
"children": []
},
{
"id": 4,
"name": "Iraq",
"parentId": 2,
"children": []
},
{
"id": 10,
"name": "Qatar",
"parentId": 2,
"children": []
}, {
"id": 3,
"name": "Bahrain",
"parentId": 2,
"children": []
},
{
"id": 6,
"name": "Jordan",
"parentId": 2,
"children": []
}, {
"id": 8,
"name": "Lebanon",
"parentId": 2,
"children": []
}, {
"id": 5,
"name": "Israel",
"parentId": 2,
"children": []
}, {
"id": 9,
"name": "Oman",
"parentId": 2,
"children": []
}
]
}
]
}
]
更新日期: 21-11-2020
386 次瀏覽
廣告