树形递归实现多级评论
最近在想将博客网站做成小程序版本，之前只是实现了文章列表和文章详情的展示，这两天在进行评论的改写。在评论中是一个多级嵌套的方式来进行展示的，也就是说每一条评论有一个自己的评论id，然后有一个父ID，指向父级的评论ID，孙子节点和祖父节点之间没有相应的关联。这样形成一个多级嵌套的模式，具体实现的效果为下图所示
后台返回的数据结构：
var result = {
success: true,
data: [
{
comment_ID: 14,
comment_author: "宁波大学生网",
comment_content: "初学者连slect都没用过，还不知道能设置背景呢 :arrow: ，谢谢分享，已收藏！欢迎互访，宁波大学生网",
comment_parent: 0,
comment_date: "2015-04-08T01:19:57.000Z"
},
{
comment_ID: 15,
comment_author: "小小的坏",
comment_content: "初学者慢慢也会变成大神级别的",
comment_parent: 14,
comment_date: "2015-04-08T01:25:20.000Z"
},
{
comment_ID: 22,
comment_author: "xixi",
comment_content: "我来啦",
comment_parent: 0,
comment_date: "2015-04-08T03:56:06.000Z"
},
{
comment_ID: 23,
comment_author: "小小的坏",
comment_content: "欢迎",
comment_parent: 22,
comment_date: "2015-04-08T03:56:26.000Z"
},
{
comment_ID: 24,
comment_author: "岁月拓荒者",
comment_content: "就这些啊",
comment_parent: 23,
comment_date: "2015-04-08T04:00:48.000Z"
}
],
errormsg: "查询成功"
}上述返回值简要摘取了一部分，可以其数据结构，我们需要做的就是将其进行树形层级结构化。在这里通过递归的方式来进行。先说一下思路，先将comment_parent值为0的节点取出，这些节点为最外层节点，然后将子节点依次插入，我们需要进行排序，由于后台返回的数据已经按照时间进行了排序，孙子节点产生的时间必然要晚于子节点，所以依次插入的时候无需担心会有节点漏掉
下面来看具体实现代码，首先需要做的是要把根节点和子节点剥离出来
var parent = [],child = [];
result.data.map(item=>{
if(item.comment_parent==0){
parent.push(item);
}else{
child.push(item);
}
})然后进行递归算法
/**
* insertNode (data, node) 在原数据 data 中，插入节点数据 node
* @param data array 这是原数据
* @param node object 这是要插入的节点
* @returns object 返回插入之后的结果数据
*/
function insertNode (data, node) {
for (let i = 0; i < data.length; i++) {
if (data[i].comment_ID === node.comment_parent) {
if (!data[i].child) {
data[i].child = [];
}
data[i].child.push(node);
return data;
}
if (data[i].child ) {
data[i].child = insertNode(data[i].child, node)
}
}
return data;
}有了递归算法以后就简单了，依次插入即可
child.map(item=>{
parent = insertNode(parent, item);
});
console.log(parent);至此，一个完整的树形递归实现多级评论就算是完成了
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2018-09-03，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
