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

เรามีไฟล์ json ที่ซับซ้อนซึ่งเราต้องจัดการกับ JavaScript เพื่อให้มีลำดับชั้น เพื่อสร้างแผนผังในภายหลัง

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

• id − id เฉพาะ

• parentId - id ของโหนดหลัก (ซึ่งจะเป็น 0 หากโหนดนั้นเป็นรูทของทรี)

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

ข้อมูล JSON ได้รับการ "จัดลำดับ" แล้ว หมายความว่ารายการหนึ่งจะมีโหนดหลักหรือโหนดพี่ชายอยู่เหนือตัวเอง และโหนดย่อยหรือโหนดพี่น้องอยู่ภายใต้ตัวมันเอง

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

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": []
         }
      ]
   }
]