2、扁平结构转为树状结构

[

    {

      id: "01",

      pid: "",

      name: "老王",

      children: []

    },

    {

      id: "02",

      pid: "01",

      name: "小张",

      children: []

    },

    {

      id: "03",

      pid: "02",

      name: "小xx",

      children: []

    }

]

转成

[

    {

      id: "01",

      pid: "",

      name: "老王",

      children: [

        {

          id: "02",

          pid: "01",

          name: "小张",

          children: [

            {

              id: "03",

              pid: "02",

              name: "小xx"

            }

          ]

        }

      ]

    }

]

 思路:首先对原数据进行升读克隆在循环所有项在返回每一项的子级数组判断数据大于0的时候返回如果存在子级,则给父级添加一个children属性,并赋值,返回第一层,返回树形数据,返回树形数据

var data = [
      {
        id: "01",
        pid: "",
        name: "老王",
        children: []
      },
      {
        id: "02",
        pid: "01",
        name: "小张",
        children: []
      },
      {
        id: "03",
        pid: "02",
        name: "小xx",
        children: []
      }
    ]
    function toTree(data) {
      let cloneData = JSON.parse(JSON.stringify(data))    // 对源数据深度克隆
      let tree = cloneData.filter((father) => {              //循环所有项
        let branchArr = cloneData.filter((child) => {
          return father.id == child.pid;//返回每一项的子级数组
        });
        if (branchArr.length > 0) {
          father.children = branchArr; //如果存在子级,则给父级添加一个children属性,并赋值
        }
        return father.pid == 0;//返回第一层
      });
      return tree;    //返回树形数据
    }
    var tree = toTree(data);
    console.log(tree);

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值