使用 JavaScript 将对象数组转换为树数组对象

Question

我有这些数据，我想将其转换为具有良好性能的树数据
每个对象都有children属性，其中包含元素的id 。 检查下面的代码
输入：

let data = [
  {
    "type": "Section",
    "children": [
      "19348bd8-a07c-40fb-b2f5-0a240dd140d3"
    ],
    "_id": "c2c463d9-259e-42e9-bce2-a6735a6ba17d",
  },
  {
    "type": "Row",
    "children": [
      "8bd8a07c-70fb-42f5-8a24-0dd140d36559"
    ],
    "_id": "19348bd8-a07c-40fb-b2f5-0a240dd140d3",
  },
  {
    "type": "Column",
    "children": [
      "a07c70fb-b2f5-4a24-8dd1-40d3655914e3",
      "d8a07c70-fbb2-450a-a40d-d140d3655914"
    ],
    "_id": "8bd8a07c-70fb-42f5-8a24-0dd140d36559",
  },
  {
    "type": "Paragraph",
    "children": [
      "7c70fbb2-f50a-440d-9140-d3655914e3d0",
      "70fbb2f5-0a24-4dd1-80d3-655914e3d02e"
    ],
    "_id": "a07c70fb-b2f5-4a24-8dd1-40d3655914e3",
  },
  {
    "type": "Dropcap",
    "children": [],
    "_id": "7c70fbb2-f50a-440d-9140-d3655914e3d0",
  },
  {
    "type": "Text",
    "children": [],
    "_id": "70fbb2f5-0a24-4dd1-80d3-655914e3d02e",
  },
  {
    "type": "Block",
    "children": [],
    "_id": "d8a07c70-fbb2-450a-a40d-d140d3655914",
  }
]

预期输出：

[
        {
            "title": "Section",
            "key": "c2c463d9-259e-42e9-bce2-a6735a6ba17d",
            "children": [
                {
                    "title": "Row",
                    "key": "19348bd8-a07c-40fb-b2f5-0a240dd140d3",
                    "children": [
                        {
                            "title": "Column",
                            "key": "8bd8a07c-70fb-42f5-8a24-0dd140d36559",
                            "children": [
                                {
                                    "title": "Paragraph",
                                    "key": "a07c70fb-b2f5-4a24-8dd1-40d3655914e3",
                                    "children": [
                                        {
                                            "title": "Dropcap",
                                            "key": "7c70fbb2-f50a-440d-9140-d3655914e3d0",
                                            "children": []
                                        },
                                        {
                                            "title": "Text",
                                            "key": "70fbb2f5-0a24-4dd1-80d3-655914e3d02e",
                                            "children": []
                                        }
                                    ]
                                },
                                {
                                    "title": "Block",
                                    "key": "d8a07c70-fbb2-450a-a40d-d140d3655914",
                                    "children": []
                                }
                            ]
                        }
                    ]
                }
            ]
        },
    ]

我尝试使用map和find方法来更新children属性的详细信息，但无法进一步达到预期的结果。 我需要一些建议或指南来解决这个问题https://repl.it/repls/QueasyPureParallelcomputing#index.js

Answer 1

你需要

• 收集所有子节点（这里是一个只有键的Set noParents ）
• 使用数据结构，如对象或映射，用于将新对象及其关联的键，
• 只获取没有子对象的对象，
• 为嵌套的子对象分配对象。

 const data = [{ type: "Section", children: ["19348bd8-a07c-40fb-b2f5-0a240dd140d3"], _id: "c2c463d9-259e-42e9-bce2-a6735a6ba17d" }, { type: "Row", children: ["8bd8a07c-70fb-42f5-8a24-0dd140d36559"], _id: "19348bd8-a07c-40fb-b2f5-0a240dd140d3" }, { type: "Column", children: ["a07c70fb-b2f5-4a24-8dd1-40d3655914e3", "d8a07c70-fbb2-450a-a40d-d140d3655914"], _id: "8bd8a07c-70fb-42f5-8a24-0dd140d36559" }, { type: "Paragraph", children: ["7c70fbb2-f50a-440d-9140-d3655914e3d0", "70fbb2f5-0a24-4dd1-80d3-655914e3d02e"], _id: "a07c70fb-b2f5-4a24-8dd1-40d3655914e3" }, { type: "Dropcap", children: [], _id: "7c70fbb2-f50a-440d-9140-d3655914e3d0" }, { type: "Text", children: [], _id: "70fbb2f5-0a24-4dd1-80d3-655914e3d02e" }, { type: "Block", children: [], _id: "d8a07c70-fbb2-450a-a40d-d140d3655914" }], noParents = new Set, nodes = data.reduce((r, { _id: key, type: title, children }) => { Object.assign( r[key] = r[key] || {}, { title, key, children: children.map(key => (noParents.add(key), r[key] = r[key] || {})) } ); return r; }, {}), tree = Object.values(nodes).filter(o => !noParents.has(o.key)); console.log(tree);

 .as-console-wrapper { max-height: 100% !important; top: 0; }