javascript - 如何正确排序我的评论/回复/对回复数据的回复

Question

我正在使用 Nodejs、Express、MySQL、EJS。

用户能够创建帖子和评论/回复评论/回复对这些帖子的回复。

问题:我不知道如何以允许我在 EJS 中呈现它们的方式将数据分类为对象/数组。我知道如何针对评论和回复评论，但不知道如何回复回复。如何创建一个对象/数组(或多个对象/数组)来“更容易/更简单”地管理评论、回复和回复的回复(...等)？

想法:我相信最终产品应该是这样的:

• 当呈现 EJS 时，它会检查已排序的评论数据，如果有评论，它将为该单个评论(以及该单个评论的回复)创建 1 个容器 div，每个其他评论都有自己的容器分区
• 在该容器 div 中，将是仅包含评论的主要评论 div。
• 评论div下面是评论div的回复(也许回复的回复也存储在这里，或者专门创建一个div)
  • (我不需要这样做，你可以按照自己的方式去做，我只是觉得这样做还不错)

“评论”MySQL 表是:

ID     comment                         ReplyToCommentID
--------------------------------------------------------
1 | First Updated Comment              | NULL
2 | Second Comment                     | NULL
3 | Third Comment                      | NULL
4 | 4th Comment                        | NULL
5 | This is a reply to comment ID 1    |  1
6 | Reply to Comment ID 4              |  4
7 | Testing  here                      | NULL
8 | TriHard 7 comment id 7             | NULL

ReplyToCommentID中的值表示评论是对ID为该值的评论的回复，ID为5和6的评论是对ID为1和4的评论的回复，如果为NULL则表示是普通评论对帖子发表评论。

将它们从 MySQL 获取到 Node 以这种格式返回它们:

[{"id":1,"comment":"First Updated Comment","ReplyToCommentID":null},{"id":2,"comment":"Second Comment","ReplyToCommentID":null},{"id":3,"comment":"Third Comment","ReplyToCommentID":null},{"id":4,"comment":"4th Comment","ReplyToCommentID":null},{"id":5,"comment":"This is a reply to comment ID 1","ReplyToCommentID":1},{"id":6,"comment":"Reply to Comment ID 4","ReplyToCommentID":4},{"id":7,"comment":"Testing here","ReplyToCommentID":null},{"id":8,"comment":"TriHard 7 comment id 7","ReplyToCommentID":null}]

将评论和回复分离到它们自己的对象中可以做到这一点。 (显然)

this is replies {"1":"This is a reply to comment ID 1","4":"Reply to Comment ID 4"}
This is comments {"1":"First Updated Comment","2":"Second Comment","3":"Third Comment","4":"4th Comment","7":"Testing here","8":"TriHard 7 comment id 7"}

我花了几天时间试图解决这个问题，但对于我的“学生体验”来说似乎太过分了。 (我是自学成才，所以在现实生活中没有人可以求助)

如果你能帮助我，我将不胜感激。

感谢您的宝贵时间。

Answer 1

您目前有一个列表。但你实际上想要一个“ TreeView ”。所以把你的列表变成一棵树是有意义的。到时候我们还可以对根 Node 进行排序:

 const roots = [];
 const byId = new Map();

 for(const reply of replies)
   byId.set(reply.id, reply);

 for(const reply of replies) {
   const {ReplyToComment} = reply;
   if(ReplyToComment) {
    const parent = byId.get(ReplyToComment);
    (parent.children || (parent.children = [])).push(reply);
   } else {
    roots.push(reply);
   }
}

现在 roots 看起来像这样:

[{
  id: 1,
  /*...*/
  children: [{
    id:2,
    ReplyToComment:1
  }, /*...*/]
}, /*...*/ ]

然后如何将它呈现到您的页面是您的事情，但是递归方法看起来像:

 function show(replies, depth = 0) {
   for(const reply of replies) {
     console.log(" ".repeat(depth) + reply.comment);
     show(reply.children || [], depth + 1);
    }
 }

 show(roots);

现在控制台输出将是

 comment
  reply
   reply
  reply
  ...

html也可以采用类似的东西。