การเรียงอาร์เรย์ JavaScript ตามระดับ (level)

เรามีข้อมูลที่มีความสัมพันธ์ one-to-many ในอาร์เรย์เดียวกัน การจัดระเบียบถูกกำหนดโดย level องค์ประกอบ parent จะมี level สูงกว่าตนเองหนึ่งระดับเสมอ และถูกอ้างอิงโดย parentId

เราต้องการรับอาร์เรย์หลายระดับจากอาร์เรย์นี้ องค์ประกอบที่มี level สูงสุดจะเป็นอาร์เรย์หลัก พร้อมลูกเป็นซับอาร์เรย์

ถ้าอินพุทอาร์เรย์กำหนดโดย

const arr = [ 
  { _id: 100, level: 3, parentId: null }, 
  { _id: 101, level: 2, parentId: 100 }, 
  { _id: 102, level: 2, parentId: 100 }, 
  { _id: 103, level: 2, parentId: 100 }, 
  { _id: 104, level: 1, parentId: 101 }, 
  { _id: 105, level: 1, parentId: 102 }, 
  { _id: 106, level: 1, parentId: 101 }, 
  { _id: 107, level: 1, parentId: 103 }, 
  { _id: 108, level: 1, parentId: 102 }, 
  { _id: 109, level: 1, parentId: 103 } 
];

โครงสร้างเอาต์พุทควรเป็นอย่างนี้

100 
| 
|------------------------------------ 
| | | | 
101 102 103 
------- ------ ------ 
| | | | | | 
104 106 105 108 107 109

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

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

const arr = [{ _id: 100, level: 3, parentId: null }, { _id: 101, level: 2, parentId: 100 }, { _id: 102, level: 2, parentId: 100 }, { _id: 103, level: 2, parentId: 100 }, { _id: 104, level: 1, parentId: 101 }, { _id: 105, level: 1, parentId: 102 }, { _id: 106, level: 1, parentId: 101 }, { _id: 107, level: 1, parentId: 103 }, { _id: 108, level: 1, parentId: 102 }, { _id: 109, level: 1, parentId: 103 }]; 
const prepareTree = (arr = [], root = null) => { 
  let res; 
  const obj = Object.create(null); 
  arr.forEach(el => { 
    el.children = obj[el._id] && obj[el._id].children; 
    obj[el._id] = el; 
    if (el.parentId === root) { 
      res = el; 
    } else { 
      obj[el.parentId] = obj[el.parentId] || {}; 
      obj[el.parentId].children = obj[el.parentId].children || []; 
      obj[el.parentId].children.push(el); 
    } 
  }); 
  return res; 
}; 
console.log(JSON.stringify(prepareTree(arr), undefined, 4));

ผลลัพธ์

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

{
  "_id": 100,
  "level": 3,
  "parentId": null,
  "children": [
    {
      "_id": 101,
      "level": 2,
      "parentId": 100,
      "children": [
        { "_id": 104, "level": 1, "parentId": 101 },
        { "_id": 106, "level": 1, "parentId": 101 }
      ]
    },
    {
      "_id": 102,
      "level": 2,
      "parentId": 100,
      "children": [
        { "_id": 105, "level": 1, "parentId": 102 },
        { "_id": 108, "level": 1, "parentId": 102 }
      ]
    },
    {
      "_id": 103,
      "level": 2,
      "parentId": 100,
      "children": [
        { "_id": 107, "level": 1, "parentId": 103 },
        { "_id": 109, "level": 1, "parentId": 103 }
      ]
    }
  ]
}