我如何将带有 parentId 的平面数组变成一棵树？答案

【问题标题】：How would I turn a flat array with parentId into a tree?我如何将带有 parentId 的平面数组变成一棵树？
【发布时间】：2022-11-16 02:28:44
【问题描述】：

我有一个包含 id 和 parentId 的数组，我需要从这个平面数组中创建一棵树，以便每个与 id 匹配的 parentId 现在都是 comments 下的一个孩子

它基本上是一个线程评论列表。

{
  "comments": [
    {
      "body": "asdf",
      "createdAt": "2022-11-15T17:53:05.048Z",
      "createdBy": {
        "id": "user:34nrxg022jt61t3xecgx",
        "username": "asdf"
      },
      "id": "comments:fmd0noccuj",
      "parentId": "comments:yxbc3jv4yp",
      "postId": "posts:j6uzaypl61",
      "updatedAt": "2022-11-15T17:53:05.048Z"
    },
    {
      "body": "asdf",
      "createdAt": "2022-11-15T17:51:36.154Z",
      "createdBy": {
        "id": "user:34nrxg022jt61t3xecgx",
        "username": "asdf"
      },
      "id": "comments:gfanwk4r1d",
      "parentId": null,
      "postId": "posts:j6uzaypl61",
      "updatedAt": "2022-11-15T17:51:36.154Z"
    },
    {
      "body": {},
      "createdAt": "2022-11-15T17:48:38.321Z",
      "createdBy": {
        "id": "user:34nrxg022jt61t3xecgx",
        "username": "asdf"
      },
      "id": "comments:0atvept3ob",
      "parentId": null,
      "postId": "posts:j6uzaypl61",
      "updatedAt": "2022-11-15T17:48:38.321Z"
    },
    {
      "body": {},
      "createdAt": "2022-11-15T17:45:45.008Z",
      "createdBy": {
        "id": "user:34nrxg022jt61t3xecgx",
        "username": "asdf"
      },
      "id": "comments:kiqco3uexk",
      "parentId": null,
      "postId": "posts:j6uzaypl61",
      "updatedAt": "2022-11-15T17:45:45.008Z"
    },
    {
      "body": {},
      "createdAt": "2022-11-15T17:44:34.587Z",
      "createdBy": {
        "id": "user:34nrxg022jt61t3xecgx",
        "username": "asdf"
      },
      "id": "comments:gs641tos5h",
      "parentId": null,
      "postId": "posts:j6uzaypl61",
      "updatedAt": "2022-11-15T17:44:34.587Z"
    },
    {
      "body": "Test2",
      "createdAt": "2022-11-15T10:14:24.119Z",
      "createdBy": {
        "id": "user:34nrxg022jt61t3xecgx",
        "username": "asdf"
      },
      "id": "comments:yxbc3jv4yp",
      "parentId": null,
      "postId": "posts:j6uzaypl61",
      "updatedAt": "2022-11-15T10:14:24.119Z"
    },
    {
      "body": "test",
      "createdAt": "2022-11-15T10:09:13.370Z",
      "createdBy": {
        "id": "user:34nrxg022jt61t3xecgx",
        "username": "asdf"
      },
      "id": "comments:1llogp6a7t",
      "parentId": null,
      "postId": "posts:j6uzaypl61",
      "updatedAt": "2022-11-15T10:09:13.370Z"
    },
    {
      "body": "test",
      "createdAt": "2022-11-15T10:07:22.243Z",
      "createdBy": {
        "id": "user:34nrxg022jt61t3xecgx",
        "username": "asdf"
      },
      "id": "comments:xqrk9bfp0h",
      "parentId": null,
      "postId": "posts:j6uzaypl61",
      "updatedAt": "2022-11-15T10:07:22.243Z"
    }
  ]
}

【问题讨论】：

标签： javascript

【解决方案1】：

我会创建一个 commentID -> comment 的映射，然后遍历每个评论，如果它有一个 parentID，将它添加到 cmets[parentID].cmets，并从顶级映射中删除它，然后从映射中获取值：

const data = {
  "comments": [
    {
      "body": "asdf",
      "createdAt": "2022-11-15T17:53:05.048Z",
      "createdBy": {
        "id": "user:34nrxg022jt61t3xecgx",
        "username": "asdf"
      },
      "id": "comments:fmd0noccuj",
      "parentId": "comments:yxbc3jv4yp",
      "postId": "posts:j6uzaypl61",
      "updatedAt": "2022-11-15T17:53:05.048Z"
    },
    {
      "body": "asdf",
      "createdAt": "2022-11-15T17:51:36.154Z",
      "createdBy": {
        "id": "user:34nrxg022jt61t3xecgx",
        "username": "asdf"
      },
      "id": "comments:gfanwk4r1d",
      "parentId": null,
      "postId": "posts:j6uzaypl61",
      "updatedAt": "2022-11-15T17:51:36.154Z"
    },
    {
      "body": {},
      "createdAt": "2022-11-15T17:48:38.321Z",
      "createdBy": {
        "id": "user:34nrxg022jt61t3xecgx",
        "username": "asdf"
      },
      "id": "comments:0atvept3ob",
      "parentId": null,
      "postId": "posts:j6uzaypl61",
      "updatedAt": "2022-11-15T17:48:38.321Z"
    },
    {
      "body": {},
      "createdAt": "2022-11-15T17:45:45.008Z",
      "createdBy": {
        "id": "user:34nrxg022jt61t3xecgx",
        "username": "asdf"
      },
      "id": "comments:kiqco3uexk",
      "parentId": null,
      "postId": "posts:j6uzaypl61",
      "updatedAt": "2022-11-15T17:45:45.008Z"
    },
    {
      "body": {},
      "createdAt": "2022-11-15T17:44:34.587Z",
      "createdBy": {
        "id": "user:34nrxg022jt61t3xecgx",
        "username": "asdf"
      },
      "id": "comments:gs641tos5h",
      "parentId": null,
      "postId": "posts:j6uzaypl61",
      "updatedAt": "2022-11-15T17:44:34.587Z"
    },
    {
      "body": "Test2",
      "createdAt": "2022-11-15T10:14:24.119Z",
      "createdBy": {
        "id": "user:34nrxg022jt61t3xecgx",
        "username": "asdf"
      },
      "id": "comments:yxbc3jv4yp",
      "parentId": null,
      "postId": "posts:j6uzaypl61",
      "updatedAt": "2022-11-15T10:14:24.119Z"
    },
    {
      "body": "test",
      "createdAt": "2022-11-15T10:09:13.370Z",
      "createdBy": {
        "id": "user:34nrxg022jt61t3xecgx",
        "username": "asdf"
      },
      "id": "comments:1llogp6a7t",
      "parentId": null,
      "postId": "posts:j6uzaypl61",
      "updatedAt": "2022-11-15T10:09:13.370Z"
    },
    {
      "body": "test",
      "createdAt": "2022-11-15T10:07:22.243Z",
      "createdBy": {
        "id": "user:34nrxg022jt61t3xecgx",
        "username": "asdf"
      },
      "id": "comments:xqrk9bfp0h",
      "parentId": null,
      "postId": "posts:j6uzaypl61",
      "updatedAt": "2022-11-15T10:07:22.243Z"
    }
  ]
}

const comments = data.comments.reduce((carry, current) => {
    carry[current.id] = { ...current, comments: [] }
    return carry;
}, {});


Object.values(comments).forEach((c) => {
    if (c.parentId !== null && comments[c.parentId]) {
        comments[c.parentId].comments.push(c);
    }
});

Object.values(comments).forEach((c) => {
    if (c.parentId !== null && comments[c.parentId]) {
       delete(comments[c.id])
    }
});
console.log(JSON.stringify(Object.values(comments), ' ', 2));

【讨论】：