แปลงแผนผังจากรูปแบบ DB เป็นรูปแบบ JSON ใน JavaScript

สมมติว่าเรามีอาร์เรย์ของวัตถุเช่นนี้ -

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