js处理树形结构数据(查找父级节点)

野性酷女 2022-08-31 05:58 268阅读 0赞

原始数据：

var treeData = [{
    		"id": 1135490,
    		"username": "cowJun",
    		"password": "",
    		"salt": "",
    		"nickname": "Cow",
    		"mobile": "",
    		"email": "",
    		"status": 1,
    		"createBy": 0,
    		"createTime": 1624870017000,
    		"updateBy": 0,
    		"updateTime": 1626339896000,
    		"remark": "",
    		"roleIdList": [
    
    		],
    		"roleName": "",
    		"parentId": 0,
    		"headUrl": "http://wework.qpic.cn/bizmail/L9pGC08EwibRf7rsOD9tNcLM7oyNIJU8Vb5YuXl55t9Okoas9NLxpnw/100"
    	},
    	{
    		"id": 1135510,
    		"username": "ChenDanPing",
    		"password": "",
    		"salt": "",
    		"nickname": "~萍",
    		"mobile": "13420060938",
    		"email": "chendanping@talkweb.com.cn",
    		"status": 1,
    		"createBy": 0,
    		"createTime": 1624870017000,
    		"updateBy": 0,
    		"updateTime": 1626339896000,
    		"remark": "",
    		"roleIdList": [
    
    		],
    		"roleName": "",
    		"parentId": 0,
    		"headUrl": "http://wework.qpic.cn/bizmail/07XOuJxbCYYyc5mQgVqxNmL9CiaKm5Y9XeMic8IUgaz6E2GpSao8hWLQ/100"
    	},
    	{
    		"id": 1135519,
    		"username": "SunYongHui",
    		"password": "",
    		"salt": "",
    		"nickname": "~辉",
    		"mobile": "13533179307",
    		"email": "",
    		"status": 1,
    		"createBy": 0,
    		"createTime": 1624870017000,
    		"updateBy": 0,
    		"updateTime": 1626886800000,
    		"remark": "一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十一二三四五六七八九十",
    		"roleIdList": [
    
    		],
    		"roleName": "",
    		"parentId": 1135618,
    		"headUrl": "http://wework.qpic.cn/bizmail/Vg9zcw5zZhSKM7pgwDPj8I6DpS2ubj9MYJDsFD95jtY605YZwwo3lQ/100"
    	},
    	{
    		"id": 1135521,
    		"username": "ZhongHuaYing",
    		"password": "",
    		"salt": "",
    		"nickname": "~英",
    		"mobile": "18678127170",
    		"email": "",
    		"status": 1,
    		"createBy": 0,
    		"createTime": 1624870017000,
    		"updateBy": 0,
    		"updateTime": 1626886800000,
    		"remark": "",
    		"roleIdList": [
    
    		],
    		"roleName": "",
    		"parentId": 1135672,
    		"headUrl": "http://wework.qpic.cn/bizmail/5e4BjUCZSaO1w63VBDfCFkNbCnpysREjDsXKxopiaKice54j3oxUU3hQ/100"
    	},
    	{
    		"id": 1135525,
    		"username": "WuYuLe",
    		"password": "",
    		"salt": "",
    		"nickname": "吴~",
    		"mobile": "13692742426",
    		"email": "",
    		"status": 1,
    		"createBy": 0,
    		"createTime": 1624870017000,
    		"updateBy": 0,
    		"updateTime": 1626339896000,
    		"remark": "",
    		"roleIdList": [
    
    		],
    		"roleName": "",
    		"parentId": 0,
    		"headUrl": "https://wework.qpic.cn/bizmail/Am2bFX70d9TI9oT6jfOQ5J9xdzzUsC9iaHesicDQnkJeSZTO3At041ibQ/100"
    	},
    	{
    		"id": 1135585,
    		"username": "ww20fb9ace870aaf02/sunyonghui",
    		"password": "",
    		"salt": "",
    		"nickname": "~辉",
    		"mobile": "13633079307",
    		"email": "",
    		"status": 1,
    		"createBy": 0,
    		"createTime": 1624870115000,
    		"updateBy": 0,
    		"updateTime": 1626886801000,
    		"remark": "",
    		"roleIdList": [
    
    		],
    		"roleName": "",
    		"parentId": 1135618,
    		"headUrl": "https://big-group-uat.gacne.com.cn:4430/group1/M00/00/01/ClgTgWDUXmyAL5H-AABagMHrpXI988.png"
    	},
    	{
    		"id": 1135618,
    		"username": "ww20fb9ace870aaf02/CaiYanTing",
    		"password": "",
    		"salt": "",
    		"nickname": "~婷",
    		"mobile": "18912303217",
    		"email": "",
    		"status": 1,
    		"createBy": 0,
    		"createTime": 1624870115000,
    		"updateBy": 0,
    		"updateTime": 1626886801000,
    		"remark": "",
    		"roleIdList": [
    
    		],
    		"roleName": "",
    		"parentId": 0,
    		"headUrl": "https://big-group-uat.gacne.com.cn:4430/group1/M00/00/01/ClgTgWDUXmyAL5H-AABagMHrpXI988.png"
    	},
    	{
    		"id": 1135632,
    		"username": "ww20fb9ace870aaf02/qianyongxiang",
    		"password": "",
    		"salt": "",
    		"nickname": "钱~",
    		"mobile": "15793115073",
    		"email": "",
    		"status": 1,
    		"createBy": 0,
    		"createTime": 1624870115000,
    		"updateBy": 0,
    		"updateTime": 1626886801000,
    		"remark": "",
    		"roleIdList": [
    
    		],
    		"roleName": "",
    		"parentId": 1135521,
    		"headUrl": "https://big-group-uat.gacne.com.cn:4430/group1/M00/00/01/ClgTgWDUXmyAL5H-AABagMHrpXI988.png"
    	},
    	{
    		"id": 1135639,
    		"username": "ww20fb9ace870aaf02/WangLiLi",
    		"password": "",
    		"salt": "",
    		"nickname": "~",
    		"mobile": "17895580745",
    		"email": "",
    		"status": 1,
    		"createBy": 0,
    		"createTime": 1624870115000,
    		"updateBy": 0,
    		"updateTime": 1626886801000,
    		"remark": "",
    		"roleIdList": [
    
    		],
    		"roleName": "",
    		"parentId": 0,
    		"headUrl": "https://big-group-uat.gacne.com.cn:4430/group1/M00/00/01/ClgTgWDUXmyAL5H-AABagMHrpXI988.png"
    	},
    	{
    		"id": 1135672,
    		"username": "DengJieWen",
    		"password": "",
    		"salt": "",
    		"nickname": "~文",
    		"mobile": "13240178984",
    		"email": "",
    		"status": 1,
    		"createBy": 0,
    		"createTime": 1626339896000,
    		"updateBy": 0,
    		"updateTime": 1626339943000,
    		"remark": "",
    		"roleIdList": [
    
    		],
    		"roleName": "",
    		"parentId": 1135510,
    		"headUrl": "http://wework.qpic.cn/bizmail/zG6cu8zoaOo3aMYIZeaoywQZ13Dopwx10eyRXzOsGhGWsicSWWd1tOg/100"
    	}
    ]

查找排序处理（递归）：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<script src="js/json.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			window.onload = function() {
    				let result_ = []; // 结果数据
    				let middle_ = []; // 
    				if (!treeData || !treeData.length) return;
    				// 查找一级节点
    				treeData.forEach((f) => {
    					f.parentId == 0 ? result_.push({
    						...f,
    						children: []
    					}) : middle_.push(f); // 一级：other
    				});
    				findParent([...middle_], result_, 2); // 查找二级节点数据
    
    				/**
    				 * func: 查找父节点
    				 * left_: 未找到parent数据
    				 * 
    				 * **/
    				function findParent(left_, target_) {
    					left_.forEach((l, i) => {
    						target_.forEach((t) => {
    							if (t.id == l.parentId)(t.children = []) && (t.children.push({
    								...l,
    							})) && (delete left_[i])
    						})
    					});
    					middle_ = left_.filter(r => {
    						return r
    					})
    					if (middle_.length) {
    						console.log('剩余未查找parent节点：', middle_);
    						target_.map(m => {
    							if (m.children && m.children.length) findParent([...middle_], m.children); // 递归处理
    						});
    						middle_ = [];
    					};
    				};
    				console.log('树状图原始数据：', treeData, '处理后结果数据 = > ', result_); /*  */
    			}
    		</script>
    	</body>
    </html>

其他方式：  
数据：

let data = [
            { id: 1, address: '安徽', parent_id: 0 },
            { id: 2, address: '江苏', parent_id: 0 },
            { id: 3, address: '合肥', parent_id: 1 },
            { id: 4, address: '庐阳区', parent_id: 3 },
            { id: 5, address: '大杨镇', parent_id: 4 },
            { id: 6, address: '南京', parent_id: 2 },
            { id: 7, address: '玄武区', parent_id: 6 },
            { id: 8, address: '梅园新村街道', parent_id: 7 },
            { id: 9, address: '上海', parent_id: 0 },
            { id: 10, address: '黄浦区', parent_id: 9 },
            { id: 11, address: '外滩', parent_id: 10 },
            { id: 12, address: '安庆', parent_id: 1 },
          ]

1：

handleTree(data, pid) {
          function tree(id) {
            let arr = []
            data
              .filter((item) => {
                return item.parent_id === id
              })
              .forEach((item) => {
                arr.push({
                  area_id: item.id,
                  label: item.address,
                  children: tree(item.id),
                })
              })
            return arr
          }
          return tree(pid)
        }
    
    console.log(handleTree(data, 0))

2：

handleTree(data) {
          // 删除 所有 children,以防止多次调用
          data.forEach(function(item) {
            delete item.children
          })
          // 将数据存储为 以 id 为 KEY 的 map 索引数据列
          var map = {}
          data.forEach(function(item) {
            map[item.id] = item
          })
          //        console.log(map);
          var val = []
          data.forEach(function(item) {
            // 以当前遍历项，的parent_id,去map对象中找到索引的id
            var parent = map[item.parent_id]
            // 好绕啊，如果找到索引，那么说明此项不在顶级当中,那么需要把此项添加到，他对应的父级中
            if (parent) {
              ;(parent.children || (parent.children = [])).push(item)
            } else {
              //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中，作为顶级
              val.push(item)
            }
          })
          return val
        },
       
     console.log(handleTree(data, 0))

3：

handleTree(arr) {
          let cloneData = JSON.parse(JSON.stringify(arr)) // 对源数据深度克隆
          return cloneData.filter((father) => {
            let branchArr = cloneData.filter(
              (child) => father.id == child.parent_id
            ) //返回每一项的子级数组
            branchArr.length > 0 ? (father.children = branchArr) : '' //如果存在子级，则给父级添加一个children属性，并赋值
            return father.parent_id == 0 //返回第一层
          })
        },
        
     console.log(handleTree(data, 0))