如何正确排序我的评论/回复/回复以回复数据

Posted 2023-03-07

【中文标题】如何正确排序我的评论/回复/回复以回复数据

【英文标题】：How do I sort my comments/replies/replies to replies data properly

【发布时间】：2018-09-03 18:33:32

【问题描述】：

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

用户可以创建帖子并评论/回复 cmets/回复以回复这些帖子。

问题：我不知道如何以允许我在 EJS 中呈现它们的方式将数据分类到对象/数组中。我知道如何为 cmets 和回复 cmets 执行此操作，但不知道回复回复。如何创建一个对象/数组（或多个对象/数组），使其“更容易/更简单”地管理 cmets、回复和回复的回复（...等）？

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

在渲染 EJS 时，它会检查 cmets 的排序数据，如果有 cmets，它将为该单个评论（以及该单个评论的回复）创建 1 个容器 div，每个其他评论都有自己的容器div。 在该容器 div 中，将是仅包含评论的主要评论 div。 评论 div 下方是评论 div 的回复（也许回复的回复也将存储在这里，或者专门为此创建一个 div） （我不需要这样做，你可以按照自己的方式来做，我只是觉得这样的做法还不错）

“cmets”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中的值表示comment是对该值ID的评论的回复，ID为5和6的cmets是对ID为1和4的cmets的回复，如果为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]

将 cmets 和回复分离到它们自己的对象中给出了这一点。 （显然）

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"

我花了几天时间试图弄清楚这一点，但这似乎对我的“学生体验”来说太过分了。 （我是自学成才，所以在现实生活中我没有人寻求帮助）

如果您能帮我解决这个问题，我将不胜感激。

感谢您的宝贵时间。

【参考方案1】：

您目前有一份清单。但你实际上想要一个“树视图”。所以把你的列表变成一棵树是有意义的。此时我们也可以对根节点进行排序：

 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可以采用类似的东西。