สร้างอาร์เรย์โครงสร้างต้นไม้จาก JSON ใน JavaScript

สมมติว่าเรามีอาร์เรย์ต่อไปนี้ใน JavaScript:

const arr = [{
  "code": "2",
  "name": "PENDING"
}, {
  "code": "2.2",
  "name": "PENDING CHILDREN"
}, {
  "code": "2.2.01.01",
  "name": "PENDING CHILDREN CHILDREN"
}, {
  "code": "2.2.01.02",
  "name": "PENDING CHILDREN CHILDREN02"
}, {
  "code": "1",
  "name": "ACTIVE"
}, {
  "code": "1.1",
  "name": "ACTIVE CHILDREN"
}, {
  "code": "1.1.01",
  "name": "ACTIVE CHILDREN CHILDREN"
}];

เราต้องเขียนฟังก์ชัน JavaScript ที่รับอาร์เรย์ดังกล่าว ฟังก์ชันควรสร้างโครงสร้างต้นไม้จากอาร์เรย์นี้โดยอิงตามคุณสมบัติ "name" ของอ็อบเจ็กต์

ดังนั้น สำหรับอาร์เรย์ข้างต้น ผลลัพธ์ควรเป็นอย่างนี้:

const output = [{
  "code": "2",
  "name": "PENDING",
  "children": [{
    "code": "2.2",
    "name": "PENDING CHILDREN",
    "children": [{
      "code": "2.2.01.01",
      "name": "PENDING CHILDREN CHILDREN"
    },
    {
      "code": "2.2.01.02",
      "name": "PENDING CHILDREN CHILDREN02"
    }]
  }]
}, {
  "code": "1",
  "name": "ACTIVE",
  "children": [{
    "code": "1.1",
    "name": "ACTIVE CHILDREN",
    "children": [{
      "code": "1.1.01",
      "name": "ACTIVE CHILDREN CHILDREN"
    }]
  }]
}];

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

โค้ดสำหรับทำสิ่งนี้คือ:

const arr = [{
  "code": "2",
  "name": "PENDING"
}, {
  "code": "2.2",
  "name": "PENDING CHILDREN"
}, {
  "code": "2.2.01.01",
  "name": "PENDING CHILDREN CHILDREN"
}, {
  "code": "2.2.01.02",
  "name": "PENDING CHILDREN CHILDREN02"
}, {
  "code": "1",
  "name": "ACTIVE"
}, {
  "code": "1.1",
  "name": "ACTIVE CHILDREN"
}, {
  "code": "1.1.01",
  "name": "ACTIVE CHILDREN CHILDREN"
}];
const transformToTree = (arr, root = '') => {
  let map = {}, last = [root], level = 0;
  map[root] = {};
  arr.forEach(el => {
    let parent = root;
    while (level && last[level].length >= el.code.length) {
      level--;
    };
    parent = last[level];
    level++;
    last.length = level;
    last.push(el.code);
    map[el.code] = el;
    map[parent].children = map[parent].children || [];
    map[parent].children.push(el);
  });
  return map[root].children;
};
console.log(JSON.stringify(transformToTree(arr), undefined, 4));

ผลลัพธ์

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

[
  {
    "code": "2",
    "name": "PENDING",
    "children": [
      {
        "code": "2.2",
        "name": "PENDING CHILDREN",
        "children": [
          {
            "code": "2.2.01.01",
            "name": "PENDING CHILDREN CHILDREN"
          },
          {
            "code": "2.2.01.02",
            "name": "PENDING CHILDREN CHILDREN02"
          }
        ]
      }
    ]
  },
  {
    "code": "1",
    "name": "ACTIVE",
    "children": [
      {
        "code": "1.1",
        "name": "ACTIVE CHILDREN",
        "children": [
          {
            "code": "1.1.01",
            "name": "ACTIVE CHILDREN CHILDREN"
          }
        ]
      }
    ]
  }
]