如何用JS递归方法基于commentId/_id将子级、孙级数据整合到父级childList

需求说明 #

需要将扁平的评论数组，基于commentId和_id字段，通过递归方式把所有子级、孙级评论嵌套到commentId为null的顶级父级评论的childList属性中：

• 当commentId为null时，该条评论是顶级父级；
• 当某条评论的commentId与另一条评论的_id匹配时，前者是后者的子级评论。

原始数据 #

let Data = [
  {
    "comment": "P1.c1.s1.z1",
    "upvoteCount": null,
    "downvoteCount": null,
    "createdDate": "2023-01-10T10:36:44.254+0000",
    "_id": 177,
    "commentId": 175,
    "isUpvoted": false,
    "isDownvoted": null,
    "repliedCommentUserName": "king m",
    "opid": 843,
    "opname": "king m",
    "isReplyClick": false
  },
  {
    "comment": "p1.c1.s1",
    "upvoteCount": null,
    "downvoteCount": null,
    "createdDate": "2023-01-09T12:26:17.791+0000",
    "_id": 176,
    "commentId": 175,
    "isUpvoted": false,
    "isDownvoted": null,
    "repliedCommentUserName": "king m",
    "opid": 843,
    "opname": "king m",
    "isReplyClick": false
  },
  {
    "comment": "p1.c1",
    "upvoteCount": null,
    "downvoteCount": null,
    "createdDate": "2023-01-09T12:26:07.097+0000",
    "_id": 175,
    "commentId": 172,
    "isUpvoted": false,
    "isDownvoted": null,
    "repliedCommentUserName": "king m",
    "opid": 843,
    "opname": "king m",
    "isReplyClick": false,
    "isHaveChildComment": true
  },
  {
    "comment": "p2.c1",
    "upvoteCount": null,
    "downvoteCount": null,
    "createdDate": "2023-01-09T12:25:55.963+0000",
    "_id": 174,
    "commentId": 173,
    "isUpvoted": false,
    "isDownvoted": null,
    "repliedCommentUserName": "king m",
    "opid": 843,
    "opname": "king m",
    "isReplyClick": false
  },
  {
    "comment": "p2",
    "upvoteCount": null,
    "downvoteCount": null,
    "createdDate": "2023-01-09T12:25:48.146+0000",
    "_id": 173,
    "commentId": null,
    "isUpvoted": false,
    "isDownvoted": null,
    "repliedCommentUserName": null,
    "opid": 843,
    "opname": "king m",
    "isReplyClick": false
  },
  {
    "comment": "p1",
    "upvoteCount": null,
    "downvoteCount": null,
    "createdDate": "2023-01-09T12:25:41.066+0000",
    "_id": 172,
    "commentId": null,
    "isUpvoted": false,
    "isDownvoted": null,
    "repliedCommentUserName": null,
    "opid": 843,
    "opname": "king m",
    "isReplyClick": false
  }
]

实现代码 #

// 递归查找并嵌套指定父级的所有子评论
function nestComments(parentId, comments) {
  // 筛选当前父级的直接子评论
  const children = comments.filter(item => item.commentId === parentId);
  // 递归处理每个子评论的子级，生成嵌套结构
  return children.map(child => ({
    ...child,
    childList: nestComments(child._id, comments)
  }));
}

// 构建最终的嵌套评论结构
function buildNestedCommentTree(comments) {
  // 获取所有顶级父级评论（commentId为null）
  const topLevelComments = comments.filter(item => item.commentId === null);
  // 为每个顶级父级添加子评论列表
  return topLevelComments.map(parent => ({
    ...parent,
    childList: nestComments(parent._id, comments)
  }));
}

// 生成结果
const finalOutput = buildNestedCommentTree(Data);
console.log(finalOutput);

代码说明 #

1. nestComments：接收父级ID和评论数组，先筛选出当前父级的直接子评论，再对每个子评论递归调用自身，生成该子评论的嵌套子列表，形成完整的层级结构。
2. buildNestedCommentTree：先筛选出所有顶级父级评论，再给每个父级调用nestComments生成对应的子评论嵌套列表，最终返回符合要求的结构。

注：如果需要将子列表字段名改为ChildList（首字母大写），只需将代码中的childList替换为ChildList即可。

期望输出 #

执行代码后会得到与需求一致的嵌套结构：

let finalOutput = [
  {
    "comment": "p2",
    "childList": [
      {
        "comment": "p2.c1",
        "upvoteCount": null,
        "downvoteCount": null,
        "createdDate": "2023-01-09T12:25:55.963+0000",
        "_id": 174,
        "commentId": 173,
        "isUpvoted": false,
        "isDownvoted": null,
        "repliedCommentUserName": "king m",
        "opid": 843,
        "opname": "king m",
        "isReplyClick": false
      }
    ],
    "upvoteCount": null,
    "downvoteCount": null,
    "createdDate": "2023-01-09T12:25:48.146+0000",
    "_id": 173,
    "commentId": null,
    "isUpvoted": false,
    "isDownvoted": null,
    "repliedCommentUserName": null,
    "opid": 843,
    "opname": "king m",
    "isReplyClick": false
  },
  {
    "comment": "p1",
    "childList": [
      {
        "comment": "p1.c1",
        "upvoteCount": null,
        "downvoteCount": null,
        "createdDate": "2023-01-09T12:26:07.097+0000",
        "_id": 175,
        "commentId": 172,
        "isUpvoted": false,
        "isDownvoted": null,
        "repliedCommentUserName": "king m",
        "opid": 843,
        "opname": "king m",
        "isReplyClick": false,
        "isHaveChildComment": true
      },
      {
        "comment": "p1.c1.s1",
        "upvoteCount": null,
        "downvoteCount": null,
        "createdDate": "2023-01-09T12:26:17.791+0000",
        "_id": 176,
        "commentId": 175,
        "isUpvoted": false,
        "isDownvoted": null,
        "repliedCommentUserName": "king m",
        "opid": 843,
        "opname": "king m",
        "isReplyClick": false
      },
      {
        "comment": "P1.c1.s1.z1",
        "upvoteCount": null,
        "downvoteCount": null,
        "createdDate": "2023-01-10T10:36:44.254+0000",
        "_id": 177,
        "commentId": 175,
        "isUpvoted": false,
        "isDownvoted": null,
        "repliedCommentUserName": "king m",
        "opid": 843,
        "opname": "king m",
        "isReplyClick": false
      }
    ],
    "upvoteCount": null,
    "downvoteCount": null,
    "createdDate": "2023-01-09T12:25:41.066+0000",
    "_id": 172,
    "commentId": null,
    "isUpvoted": false,
    "isDownvoted": null,
    "repliedCommentUserName": null,
    "opid": 843,
    "opname": "king m",
    "isReplyClick": false
  }
]

内容的提问来源于stack exchange，提问作者SATYAJIT MAHAKUD