js将有父子关系的数据转换成树形结构数据

比如如下基本数据:

let allDatas = [
  {
    id: 3,
    name: ‘bbbb‘,
    parendId: 1
  },
  {
    id: 2,
    name: ‘aaaaa‘,
    parendId: 2
  },
  {
    id: 4,
    name: ‘ccccc‘,
    parendId: 1
  },
  {
    id: 5,
    name: ‘ddddd‘,
    parendId: 4
  },
  {
    id: 6,
    name: ‘eeeee‘,
    parendId: 4
  },
  {
    id: 7,
    name: ‘ffff‘,
    parendId: 6
  },
  {
    id: 8,
    name: ‘ggggg‘,
    parendId: 3
  },
  {
    id: 9,
    name: ‘hhhhh‘,
    parendId: 5
  },
  {
    id: 10,
    name: ‘jjjj‘,
    parendId: 6
  }
];

需要转换成如下数据格式,如下:

[
  {
    "id": 3,
    "name": "bbbb",
    "children": [
      {
        "id": 8,
        "name": "ggggg",
        "children": []
      }
    ]
  },
  {
    "id": 4,
    "name": "ccccc",
    "children": [
      {
        "id": 5,
        "name": "ddddd",
        "children": [
          {
            "id": 9,
            "name": "hhhhh",
            "children": []
          }
        ]
      },
      {
        "id": 6,
        "name": "eeeee",
        "children": [
          {
            "id": 7,
            "name": "ffff",
            "children": []
          },
          {
            "id": 10,
            "name": "jjjj",
            "children": []
          }
        ]
      }
    ]
  }
]

如上id为8的父节点就是id为3的,而id为3的父节点为1,但是父节点目前没有,所以id为3就是顶级节点了。同理其他的也是一样的道理;

JS代码如下:

// 属性配置设置
let attr = {
  id: ‘id‘,
  parendId: ‘parendId‘,
  name: ‘name‘,
  rootId: 1
};
function toTreeData(data, attr) {
  let tree = [];
  let resData = data;
  for (let i = 0; i < resData.length; i++) {
    if (resData[i].parendId === attr.rootId) {
      let obj = {
        id: resData[i][attr.id],
        name: resData[i][attr.name],
        children: []
      };
      tree.push(obj);
      resData.splice(i, 1);
      i--;
    }
  }
  var run = function(treeArrs) {
    if (resData.length > 0) {
      for (let i = 0; i < treeArrs.length; i++) {
        for (let j = 0; j < resData.length; j++) {
          if (treeArrs[i].id === resData[j][attr.parendId]) {
            let obj = {
              id: resData[j][attr.id],
              name: resData[j][attr.name],
              children: []
            };
            treeArrs[i].children.push(obj);
            resData.splice(j, 1);
            j--;
          }
        }
        run(treeArrs[i].children);
      }
    }
  };
  run(tree);
  return tree;
}
let arr = toTreeData(allDatas, attr);
console.log(arr);

原文地址:https://www.cnblogs.com/tugenhua0707/p/9275958.html

时间: 2024-10-29 15:42:50

js将有父子关系的数据转换成树形结构数据的相关文章

把潜在的树形结构数据转换成树形结构数据

实体类: 1 using System.Collections.Generic; 2 using System.ComponentModel; 3 4 namespace TreeViewBindingDemo 5 { 6 public class NodeEntry : INotifyPropertyChanged 7 { 8 public NodeEntry() 9 { 10 this.NodeEntrys = new List<NodeEntry>(); 11 this.ParentID

c# List列表数据转换成树形结构

把List列表结构 转换成树形结构 /// <summary> /// 构造树形Json /// </summary> public static class TreeJson { /// <summary> /// 转换树Json /// </summary> /// <param name="list">数据源</param> /// <param name="parentId">

js通用方法获取元素,节点父子关系查找

/* *通用方式来获取元素 * 1.通过id来获取元素document.getElementById('属性名') * 2.通过便签名来获取元素document.getElementsByTagName('属性名');得到的是一个数组 * 3.通过class属性来获取元素有兼容性问题document.getElementsByClassName('class属性名');得到是一个数组 * 4.通过name属性来获取元素存在兼容性问题document.getElementsByName('name

第16课 Qt对象间的父子关系

1. Qt对象间的关系 (1)Qt对象间可以存在父子关系 ①每一个对象都保存有它所有子对象的指针 ②每一个对象都有一个指向其父对象的指针 (2)当指定Qt对象的父对象时 ①其父对象会在子对象链表中加入该对象的指针 ②该对象会保存指向其父对象的指针 (3)当Qt对象被销毁时 ①将自己从父对象的Children List移除 ②将自己的Children List中的所有对象销毁 ▲使用Qt开发时,不仅要时刻注意内存泄露的问题,还要时刻关注对象是否可能被多次销毁的问题. [编程实验]对象间的父子关系

4.使用Jackson将Json数据转换成实体数据

Jar下载地址:http://jackson.codehaus.org/ 注意:类中的属性名称一定要和Json数据的属性名称一致(大小写敏感),类之间的嵌套关系也应该和Json数据的嵌套关系一致. 4.使用Jackson将Json数据转换成实体数据,布布扣,bubuko.com

控制器的父子关系建立原则

概念: 如果2个控制器的view是父子关系(不管是直接还是间接的父子关系) 那么这2个控制器也应该为父子关系 例如: [a.view addSubview:b.view]; [a addChildViewController:b]; 或者 [a.view addSubview:otherView]; [otherView addSubview:b.view]; [a addChildViewController:b]; //添加一个子控制器 //self 成为了 OnewViewControll

Vue_(组件通讯)非父子关系组件通信

Vue单项数据流 传送门 Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信的目的 Learn   一.单项数据流 目录结构 [每个demo下方都存有html源码] 一.单项数据流 定义组件A和组件B,组件A和组件B同级关系,当点击<template-a>的button控件时,调用sendData函数,将template-a中的data数据发向template-b <

2019.9.30 Unity 3D之UI设置父子关系setParent坑

写在前面: 在做项目的时候,难免会碰到UI很多的情况,而动态加载UI就是一个很重要的问题.而动态加载UI就需要考虑到设置UI的父子关系.通常我们会使用transform.setparent(transform)来设置父子关系.到这里都还是没毛病.但是偏偏UI在设置父子关系的时候需要考虑到第二个参数.对于初学者往往会遇到UI加载出来,设置子物体后发现UI不见了,但是明明直接拖到UI层次中又是对的.这个问题就和第二个参数相关. worldPositionStays.所以这也是一个需要思考的问题. U

Linux Shell的父子关系及内建命令

Linux Shell的父子关系及内建命令 Shell的类型 系统启动什么样的shell程序取决于你个人的用户ID配置.在/etc/passwd文件中,在用户ID记录的第7个字段中列出了默认的shell程序.只要用户登录到某个虚拟控制台终端或是在GUI中启动终端仿真器,默认的shell程序就会开始运行. 在下面的例子中,用户xiaoyu使用了GNU bash shell作为自己的默认shell程序: 1 [email protected]:/$ cat /etc/passwd 2 [...] 3