Sắp xếp mảng JavaScript theo cấp độ (level)

Chúng ta có dữ liệu với mối quan hệ một-nhiều trong cùng một mảng. Tổ chức được thiết lập bởi cấp độ (level). Phần tử cha luôn ở cấp độ cao hơn một cấp so với bản thân nó và được tham chiếu bởi parentId.

Chúng ta cần lấy một mảng đa cấp từ mảng này. Các phần tử với cấp độ cao nhất sẽ là mảng chính, với các con của chúng là mảng con.

Nếu mảng đầu vào được cho bởi:

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 }
];

Thì cấu trúc đầu ra nên giống như:

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

Ví dụ

Mã thực hiện:

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));

Kết quả

Kết quả trong console:

{
  "_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 }
      ]
    }
  ]
}