JavaScript의 평면 배열에서 트리 배열 빌드

나중에 트리를 빌드하기 위해 계층 구조로 만들기 위해 JavaScript로 처리해야 하는 복잡한 json 파일이 있습니다.

JSON 배열의 모든 항목에는 -

• id - 고유 ID,

• parentId - 부모 노드의 ID(노드가 트리의 루트인 경우 0)

• level - 트리의 깊이 수준

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