สร้างอาร์เรย์ต้นไม้จากอาร์เรย์แบนใน JavaScript

เรามีไฟล์ JSON ที่ซับซ้อนที่เราต้องจัดการด้วย JavaScript เพื่อทำให้เป็นลำดับชั้น (hierarchical) เพื่อสร้างต้นไม้ในภายหลัง

ทุกรายการของ JSON อาร์เรย์มี

• id - id เฉพาะตัว

• parentId - id ของ parent node (ซึ่งเป็น 0 ถ้า node เป็นรากของต้นไม้)

• level - ระดับความลึกในต้นไม้

ข้อมูล JSON ถูก "เรียงลำดับ" แล้ว หมายถึงรายการจะมี parent node หรือ brother node อยู่ด้านบน และ child node หรือ brother node อยู่ด้านล่าง

อินพุทอาร์เรย์คือ

const arr = [ 
  { "id": "12", "parentId": "0", "text": "Man", "level": "1", "children": null }, 
  { "id": "6", "parentId": "12", "text": "Boy", "level": "2", "children": null }, 
  { "id": "7", "parentId": "12", "text": "Other", "level": "2", "children": null }, 
  { "id": "9", "parentId": "0", "text": "Woman", "level": "1", "children": null }, 
  { "id": "11", "parentId": "9", "text": "Girl", "level": "2", "children": null } 
];

และเอาต์พุทที่คาดหวังคือ

const output = [ 
  { "id": "12", "parentId": "0", "text": "Man", "level": "1", "children": [ { "id": "6", "parentId": "12", "text": "Boy", "level": "2", "children": [] }, { "id": "7", "parentId": "12", "text": "Other", "level": "2", "children": [] } ] }, 
  { "id": "9", "parentId": "0", "text": "Woman", "level": "1", "children": [ { "id": "11", "parentId": "9", "text": "Girl", "level": "2", "children": [] } ] } 
];

ตัวอย่างโค้ด

โค้ดสำหรับการทำงานนี้จะเป็นดังนี้

const arr = [ 
  { "id": "12", "parentId": "0", "text": "Man", "level": "1", "children": null }, 
  { "id": "6", "parentId": "12", "text": "Boy", "level": "2", "children": null }, 
  { "id": "7", "parentId": "12", "text": "Other", "level": "2", "children": null }, 
  { "id": "9", "parentId": "0", "text": "Woman", "level": "1", "children": null }, 
  { "id": "11", "parentId": "9", "text": "Girl", "level": "2", "children": null } 
]; 
const listToTree = (arr = []) => { 
  let map = {}, node, res = [], i; 
  for (i = 0; i < arr.length; i += 1) { 
    map[arr[i].id] = i; 
    arr[i].children = []; 
  }; 
  for (i = 0; i < arr.length; i += 1) { 
    node = arr[i]; 
    if (node.parentId !== "0") { 
      arr[map[node.parentId]].children.push(node); 
    } else { 
      res.push(node); 
    }; 
  }; 
  return res; 
}; 
console.log(JSON.stringify(listToTree(arr), undefined, 4));

ผลลัพธ์

ผลลัพธ์ในคอนโซลจะเป็นดังนี้

[ 
  { "id": "12", "parentId": "0", "text": "Man", "level": "1", "children": [ { "id": "6", "parentId": "12", "text": "Boy", "level": "2", "children": [] }, { "id": "7", "parentId": "12", "text": "Other", "level": "2", "children": [] } ] }, 
  { "id": "9", "parentId": "0", "text": "Woman", "level": "1", "children": [ { "id": "11", "parentId": "9", "text": "Girl", "level": "2", "children": [] } ] } 
]