原生JS递归寻找一维数据转多层级评论回复

原生JS递归寻找一维数据转多层级评论回复

我可以一个人 坐地铁一直到终点 ,也可以 一个人看电影到凌晨六点 ,你以为我过的孤独 我只是想过的舒服

原生JS递归寻找一维数据转多层级评论回复 1

唠叨一会

原本是打算做星宿UI的评论留言的但是wodpress过来的json数据是一级的,就知道了评论回复不好写,由“和光同尘”提供代码块进行学习;原生JS递归寻找一维数据转多层级评论回复

代码块

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    const initData = [{
        id: 1,
        parentId: 0,
        name: "1"
      },
      {
        id: 2,
        parentId: 0,
        name: "2"
      },
      {
        id: 3,
        parentId: 0,
        name: "3"
      },
      {
        id: 4,
        parentId: 1,
        name: "4"
      },
      {
        id: 5,
        parentId: 2,
        name: "5"
      },
      {
        id: 6,
        parentId: 2,
        name: "6"
      },
      {
        id: 7,
        parentId: 3,
        name: "7"
      }
    ]

    function cloneTree(score, parentId = 0) {
      let tree = [];
      score.map((item) => {
        if (item.parentId === parentId) {
          // 递归寻找
          item.children = cloneTree(score, item.id);
          tree.push(item);
        }
      });

      return tree;
    }

    console.log(cloneTree(initData));
  </script>
</body>

</html>

 

控制台截图

原生JS递归寻找一维数据转多层级评论回复 2

原生JS递归寻找一维数据转多层级评论回复 3

分享到 :
相关推荐

MUI登入源码 扁平移动端UI界面 MUI键盘顶起背景图片

MUI登入源码扁平移动端UI界面MUI键盘顶起背景图片基于MUI框架写的一个登[&h...

WordPress博客美化文章底部添加百度收录以及申明

目前自媒体给了不少新人一些可观的收入,门槛极低。但是随着现在越来越多的人开始注重版权...

MUI警务排版页面MUI自适应利用calc()函数动态计算宽度

MUI警务排版页面MUI自适应利用calc()函数动态计算宽度原先在我们设计界面的[...

扁平化MUI警务移动审批流程审批源码折叠面板

扁平化MUI警务移动审批流程审批源码折叠面板 轻量追求性能体验,是我[&h...

发表评论

邮箱地址不会被公开。 必填项已用*标注