工作中接口返回递归数据PId和id

郭旭前端

已于 2023-08-31 19:41:07 修改

阅读量90

点赞数

文章标签：数据结构

于 2023-08-31 11:20:32 首次发布

本文链接：https://blog.csdn.net/Gx754649/article/details/132599274

版权

直接上代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
  <script type="text/javascript">

var data =[{
	"Id": "1808580558524125184",
	"AppId": "3",
	"AppName": "平台中心服务",
	"CusId": "1",
	"MenuCode": "1",
	"MenuName": "哈你个头",
	"MenuType": 0,
	"SenceCode": "foot",
	"SenceName": "尾部",
	"MenuUrl": "1",
	"PId": "153",
	"MenuSort": 1,
	"MenuLogo": "1",
	"children": []
}, {
	"Id": "1808576262449532928",
	"AppId": "3",
	"AppName": "平台中心服务",
	"CusId": "1",
	"MenuCode": "1",
	"MenuName": "哈哈哈哈哈",
	"MenuType": 0,
	"SenceCode": "foot",
	"SenceName": "尾部",
	"MenuUrl": "1",
	"PId": "153",
	"MenuSort": 1,
	"MenuLogo": "1",
	"children": []
}, {
	"Id": "1808545257613299712",
	"AppId": "3",
	"AppName": "平台中心服务",
	"CusId": "1",
	"MenuCode": "1",
	"MenuName": "郭旭下级",
	"MenuType": 0,
	"SenceCode": "foot",
	"SenceName": "尾部",
	"MenuUrl": "1",
	"PId": "153",
	"MenuSort": 1,
	"MenuLogo": "1",
	"children": []
}, {
	"Id": "1808545128936247296",
	"AppId": "3",
	"AppName": "平台中心服务",
	"CusId": "1",
	"MenuCode": "1",
	"MenuName": "郭旭",
	"MenuType": 0,
	"SenceCode": "foot",
	"SenceName": "尾部",
	"MenuUrl": "1",
	"PId": "153",
	"MenuSort": 1,
	"MenuLogo": "1",
	"children": []
}, {
	"Id": "154",
	"AppId": "6",
	"AppName": "儿研所",
	"CusId": "1",
	"MenuCode": "Book",
	"MenuName": "科室视频",
	"MenuType": 0,
	"SenceCode": "foot",
	"SenceName": "尾部",
	"MenuUrl": "/empty",
	"PId": "139",
	"MenuSort": 154,
	"MenuLogo": "http://192.168.1.141:8908/CNH5/dist/img/科普视频.jpg",
	"children": []
}, {
	"Id": "153",
	"AppId": "6",
	"AppName": "儿研所",
	"CusId": "1",
	"MenuCode": "Book",
	"MenuName": "科普文章",
	"MenuType": 0,
	"SenceCode": "foot",
	"SenceName": "尾部",
	"MenuUrl": "/empty",
	"PId": "139",
	"MenuSort": 153,
	"MenuLogo": "http://192.168.1.141:8908/CNH5/dist/img/科普文章.jpg",
	"children": []
}, {
	"Id": "152",
	"AppId": "6",
	"AppName": "儿研所",
	"CusId": "1",
	"MenuCode": "Book",
	"MenuName": "科室科普矩阵",
	"MenuType": 0,
	"SenceCode": "foot",
	"SenceName": "尾部",
	"MenuUrl": "/empty",
	"PId": "154",
	"MenuSort": 152,
	"MenuLogo": "http://192.168.1.141:8908/CNH5/dist/img/订单中心.jpg",
	"children": []
}, {
	"Id": "151",
	"AppId": "6",
	"AppName": "儿研所",
	"CusId": "1",
	"MenuCode": "Book",
	"MenuName": "订单中心",
	"MenuType": 0,
	"SenceCode": "foot",
	"SenceName": "尾部",
	"MenuUrl": "/empty",
	"PId": "151",
	"MenuSort": 151,
	"MenuLogo": "http://192.168.1.141:8908/CNH5/dist/img/订单中心.jpg",
	"children": []
}, {
	"Id": "150",
	"AppId": "6",
	"AppName": "儿研所",
	"CusId": "1",
	"MenuCode": "Book",
	"MenuName": "我的票据",
	"MenuType": 0,
	"SenceCode": null,
	"SenceName": null,
	"MenuUrl": "/empty",
	"PId": "127",
	"MenuSort": 150,
	"MenuLogo": "http://192.168.1.141:8908/CNH5/dist/img/我的票据.jpg",
	"children": []
}, {
	"Id": "149",
	"AppId": "6",
	"AppName": "儿研所",
	"CusId": "1",
	"MenuCode": "Book",
	"MenuName": "我的报告",
	"MenuType": 0,
	"SenceCode": null,
	"SenceName": null,
	"MenuUrl": "/empty",
	"PId": "127",
	"MenuSort": 149,
	"MenuLogo": "http://192.168.1.141:8908/CNH5/dist/img/我的报告.jpg",
	"children": []
}]
console.log(data);

// for (const obj of data) {
//     obj.children = [];
// }

function buildTree(data) {
  const tree = [];

  const map = {};
  
  data.forEach((node) => {
    // map[node.Id] = { value: node.Id, label: node.MenuName, children: [] };
    map[node.Id] = { value: node.Id, label: node.MenuName,  };
  });
 
  data.forEach((node) => {
    if (node.PId in map) {
      const parent = map[node.PId];
     if ( !parent.children) {
        parent.children=[]
     }
      parent.children.push(map[node.Id]);
    } else {
      tree.push(map[node.Id]);
    }
  });

  return tree;
}

				
				
const newData = buildTree(data);
console.log(newData);

  </script>
 </body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script>
		//初始树结构
		let arr=[{
	"value": "154",
	"label": "科室视频",
	"children": [{
		"value": "152",
		"label": "科室科普矩阵"
	}]
}, {
	"value": "153",
	"label": "科普文章",
	"children": [{
		"value": "1808580558524125184",
		"label": "哈你个头"
	}, {
		"value": "1808576262449532928",
		"label": "哈哈哈哈哈"
	}, {
		"value": "1808545257613299712",
		"label": "郭旭下级"
	}, {
		"value": "1808545128936247296",
		"label": "郭旭"
	}]
}, {
	"value": "150",
	"label": "我的票据"
}, {
	"value": "149",
	"label": "我的报告"
}]
		//选中节点id
		let selectId='1808580558524125184';
		
		function digui(item){
			if(item.children&&item.children.length>1){
				item.children.map((ob)=>{
					ob.disabled=true;
					digui(ob);
				})
			}
		}
		
		// 子节点递归查询函数
		function getselectNode(item){
			if(item.value==selectId){
				item.disabled=true;
				if(item.children&&item.children.length>1){
					item.children.map((ob)=>{
						ob.disabled=true;
						digui(ob);
					})
				}
			}else{
				if(item.children&&item.children.length>1){
					item.children.map((ob)=>{
						getselectNode(ob);
					})
				}
			}
		}
		//对初始树结构遍历
		arr.forEach((item)=>{
			getselectNode(item)
		})
		console.log(arr)
		console.log(JSON.stringify(arr))
		
	</script>
</html>