时间戳

首页 > 解决方案 > 使用 JavaScript 将对象数组转换为树数组对象

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

问题描述

我有这些数据，我想将其转换为性能良好的树数据
每个对象都将具有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": []
                                }
                            ]
                        }
                    ]
                }
            ]
        },
    ]

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

标签： javascriptarrayslistalgorithmtree

解决方案

你需要

  • 收集所有子节点（这里只有键）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; }

推荐阅读