我有從 BE 收到的 JSON：
[
{
"id": 51,
"name": null,
"parentAccountName": "test-name",
"parentAccountId": 50
},
{
"id": 87,
"name": null,
"parentAccountName": "nam1",
"parentAccountId": 83
},
{
"id": 86,
"name": null,
"parentAccountName": "nam1",
"parentAccountId": 83
},
{
"id": 85,
"name": null,
"parentAccountName": "Test andrei",
"parentAccountId": 37
},
{
"id": 84,
"name": "nam1",
"parentAccountName": "Test andrei",
"parentAccountId": 37
},
{
"id": 50,
"name": "test-name",
"parentAccountName": "nam1",
"parentAccountId": 83
},
{
"id": 37,
"name": "Test andrei",
"parentAccountName": "test-name",
"parentAccountId": 50
},
{
"id": 34,
"name": null,
"parentAccountName": "Test andrei",
"parentAccountId": 37
}
]
我需要根據parentAccountId創建帳戶層次結構，規則是：檢查串列的每個條目是否有父級并分配給它，否則將該元素創建為根元素并將其放在正確的位置層次結構。結果應該是：
[
{
parentAccountName: 'nam1',
parentAccountId: 83,
children: [
{
id: 50,
name: 'test-name',
parentAccountName: 'nam1',
parentAccountId: 83,
children: [
{
id: 37,
name: 'Test andrei',
parentAccountName: 'test-name',
parentAccountId: 50,
children: [
{
id: 85,
name: null,
parentAccountName: 'Test andrei',
parentAccountId: 37,
},
{
id: 84,
name: 'nam1',
parentAccountName: 'Test andrei',
parentAccountId: 37,
},
{
id: 34,
name: null,
parentAccountName: 'Test andrei',
parentAccountId: 37,
},
],
},
{
id: 51,
name: null,
parentAccountName: 'test-name',
parentAccountId: 50,
},
],
},
{
id: 87,
name: null,
parentAccountName: 'nam1',
parentAccountId: 83,
},
{
id: 86,
name: null,
parentAccountName: 'nam1',
parentAccountId: 83,
},
],
},
];
我嘗試執行遞回函式并通過 parentAcountId 檢查，但我做錯了。此外，從 BE 獲得的格式也不是很清楚。我的解決方案是：
const loadLazyData = (): void => {
if (props.accounts) {
setAccountsHierarchy(configureHierarchyNodes(props.accounts, 0));
}
};
const configureHierarchyNodes = (hierarchy: IAccount[], parent?: number | undefined | null): TreeNode[] => {
const result = [];
for (const i in hierarchy) {
if (hierarchy[i].parentAccountId == parent) {
const children = configureHierarchyNodes(hierarchy, hierarchy[i].id);
if (children.length) {
hierarchy[i].children = children;
}
result.push({ ...hierarchy[i], key: `${i}-${hierarchy[i].id}`, label: hierarchy[i].accountDisplayName });
}
}
return result;
};
也許我錯過了一些東西，但在 2 天內我沒有設法解決這個問題。如果有人有任何想法，我將不勝感激。提前致謝！
uj5u.com熱心網友回復：
將陣列縮減為Map，然后再轉回陣列，Array.filter()用于獲取所有沒有parentAccountId屬性的節點。如果應該只有一個頂級父級，請Array.find()改用。
const arr = [{"id":51,"name":null,"parentAccountName":"test-name","parentAccountId":50},{"id":87,"name":null,"parentAccountName":"nam1","parentAccountId":83},{"id":86,"name":null,"parentAccountName":"nam1","parentAccountId":83},{"id":85,"name":null,"parentAccountName":"Test andrei","parentAccountId":37},{"id":84,"name":"nam1","parentAccountName":"Test andrei","parentAccountId":37},{"id":50,"name":"test-name","parentAccountName":"nam1","parentAccountId":83},{"id":37,"name":"Test andrei","parentAccountName":"test-name","parentAccountId":50},{"id":34,"name":null,"parentAccountName":"Test andrei","parentAccountId":37}]
const result = Array.from(
arr.reduce((acc, o) => {
const { parentAccountId: id, parentAccountName: name } = o
if(!acc.has(id)) acc.set(id, { id, name }) // if the current item's parent doesn't exist, create it in the Map
const parent = acc.get(id) // get the current parent
parent.children ??= [] // init children if it doesn't exist
if(!acc.has(o.id)) acc.set(o.id, o) // add the current item to the Map if it doesn't exist
else Object.assign(acc.get(o.id), o) // combine it with the existing object if it does
parent.children.push(acc.get(o.id)) // add the item to the children
return acc
}, new Map()).values()
).filter(o => !o.hasOwnProperty('parentAccountId'))
console.log(result).as-console-wrapper { max-height: 100% !important; top: 0; }uj5u.com熱心網友回復：
您可以采用標準演算法來創建樹。
結果拿沒有自己的物件的父母。
const
getTree = (data, id, parent) => {
const
t = {},
parents = new Set,
children = new Set;
data.forEach(o => {
parents.add(o[parent]);
children.add(o[id]);
((t[o[parent]] ??= {}).children ??= []).push(Object.assign(t[o[id]] ??= {}, o))
});
children.forEach(Set.prototype.delete, parents);
return [...parents].flatMap(id => t[id].children);
},
data = [{ id: 51, name: null, parentAccountName: "test-name", parentAccountId: 50 }, { id: 87, name: null, parentAccountName: "nam1", parentAccountId: 83 }, { id: 86, name: null, parentAccountName: "nam1", parentAccountId: 83 }, { id: 85, name: null, parentAccountName: "Test andrei", parentAccountId: 37 }, { id: 84, name: "nam1", parentAccountName: "Test andrei", parentAccountId: 37 }, { id: 50, name: "test-name", parentAccountName: "nam1", parentAccountId: 83 }, { id: 37, name: "Test andrei", parentAccountName: "test-name", parentAccountId: 50 }, { id: 34, name: null, parentAccountName: "Test andrei", parentAccountId: 37 }],
tree = getTree(data, 'id', 'parentAccountId');
console.log(tree);.as-console-wrapper { max-height: 100% !important; top: 0; }轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/439295.html
標籤：javascript 反应 json 打字稿 等级制度