专栏首页前端之攻略树形结构已知子节点找父节点

树形结构已知子节点找父节点

假如结构树如下,如何根据已经的label寻找父级label,网上找了几个比较好的方法 

         var data = [{
          id: 1,
          label: '一级 1',
          children: [{
            id: 4,
            label: '二级 1-1',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }, {
              id: 10,
              label: '三级 1-1-2'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }]

 第一种方法

		function find(arr,label){
		 let stock =[]
		 let going = true
		 var warker = function(arr,label){
		    arr.forEach(item=>{
			     if (!going) return
				 stock.push(item.label)
			     if(item.label == label){
				    going = false
				 }else if(item.children){
				 warker(item.children,label)
				 }else{
				  stock.pop()
				 }
			})
			if(going)  stock.pop()
		 }
		 warker(arr,label)
		 return stock
		}
		console.log(find(data,"三级 1-1-2"))

第二种方法

		function formatTree(arr,levelInfo=""){
		   return arr.map(item =>{
		      const newParent =levelInfo? levelInfo+ '--' + item.id:''+item.id
			  const temp = {
			     ...item,
				 levelInfo:newParent
			  
			  }
			  if(item.children){
			     temp.children = formatTree(item.children,newParent)
			  }
			  return temp
		   })
		}
		console.log(formatTree(data))

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue-treeselect 的使用

    有时候后台传过来的数据结构的键不是 id, label, children,我们需要转换成符合要求的数据结构

    tianyawhl
  • Element Tabs 标签页实现右键自定义菜单

    如果tab标签页比较多的话,一个个关闭比较麻烦,可以右键显示菜单,关闭所有的标签页或者特定的标签页

    tianyawhl
  • Vue 的几种数据类型处理方式

    在table的tr中,有些做为父级,有些做为子级,区别是用class来区分,点击父级的按钮,子级会隐藏和显示切换。

    tianyawhl
  • IOS UILabel设置阴影

    label.shadowColor=UIColor.lightGray label.shadowOffset=CGSize(width:2, height:2...

    用户5760343
  • 使用SAP CRM WebClient UI Design layer修改field label

    Jerry Wang
  • 广告小程序后端开发(4.导入地区数据)

    玩蛇的胖纸
  • 使用导出导入(datapump)方式将普通表切换为分区表

          随着数据库数据量的不断增长,有些表需要由普通的堆表转换为分区表的模式。有几种不同的方法来对此进行操作,诸如导出表数据,然后创建分区表再导入数据到分区...

    Leshami
  • 互联网开发模式三:持续集成与DevOps

    持续集成的意义和实践 不管是敏捷开发的快速迭代,还是重构系统,我们都将频繁的编译代码、部署、测试,也就是所谓的集成。如果我们的系统集成效率太低,那么快速的迭代可...

    韩伟
  • MongoDB增删改查操作

    创建集合分为两步,一是对对集合设定规则,二是创建集合,创建mongoose.Schema构造函数的实例即可创建集合。

    梨涡浅笑
  • 【2020HBU天梯赛训练】7-32 最长对称子串

    对给定的字符串,本题要求你输出最长对称子串的长度。例如,给定Is PAT&TAP symmetric?,最长对称子串为s PAT&TAP s,于是你应该输出11...

    韩旭051

扫码关注云+社区

领取腾讯云代金券