根据name字段 把扁平的数据 处理成树形结构

<script>
  let list = [{
    Id: 215,
    TypeName: '乔木',
    Name: '枣树',
    Pinyin: 'ZS',
    FirstPinyin: 'Z'
  }, {
    Id: 216,
    TypeName: '乔木',
    Name: '皂荚',
    Pinyin: 'ZJ',
    FirstPinyin: 'Z'
  }, {
    Id: 217,
    TypeName: '乔木',
    Name: '造型黑松',
    Pinyin: 'ZXHS',
    FirstPinyin: 'Z'
  } ,{
    Id: 233,
    TypeName: '灌木',
    Name: '白花木芙蓉',
    Pinyin: 'BHMFR',
    FirstPinyin: 'B'
  }, {
    Id: 234,
    TypeName: '灌木',
    Name: '暴马丁香',
    Pinyin: 'BMDX',
    FirstPinyin: 'B'
  }, {
    Id: 236,
    TypeName: '灌木',
    Name: '彩叶杞柳',
    Pinyin: 'CYQL',
    FirstPinyin: 'C'
  }
  
  ]

  let roots = [...new Set(list.map(({ TypeName }) => TypeName))]
  .map(TypeName => ({ id: TypeName, TypeName }));

// 遍历 list,把节点转换了加到对应的根节点下面去
  list.forEach(it => {
    const parent = roots.find(({ id }) => id === it.TypeName);
    (parent.childrenT ??= []).push({
        ...it,
        TypeName: it.Name
    });
  });


  roots.map(v=>{
    v.children=[]
      v.childrenT.map(val=>{
       v.children.push({Name:val.Name})
    })
  })
  roots.map(v=>{
    delete(v.childrenT)
    delete(v.id)
  })

  console.log(roots);

  



</script>

  

posted @ 2022-06-21 11:49  热爱前端的5号机器  阅读(36)  评论(0编辑  收藏  举报