Welcome to 16892 Developer Community-Open, Learning,Share
menu search
person
Welcome To Ask or Share your Answers For Others

Categories

获取树结构中指定节点数据,并且保持原有层级结构?

假设树的深度为3,按照id列表去遍历匹配,如果二级节点有children那么就从三级节点进行过滤,如果没有就从当前二级节点进行过滤,过滤掉不匹配的节点,并且保留原有层级结构。

问题出现的环境背景及自己尝试过哪些方法

项目中遇到的问题,自己尝试遍历进行解决,但始终保持不了原有结构不变化。遂来进行请教各路大神。

相关代码

现有tree数据如下

let ids = [11, 100, 200]; // 要获取的 id 列表
let treeData = [
  {
    id: 1,
    name: '1',
    children: [
      {
        id: 10,
        name: '1-1',
        children: [
          {
            id: 100,
            name: '1-1-1',
            children: []
          },
          {
            id: 101,
            name: '1-1-2',
            children: []
          }
        ]
      },
      {
        id: 11,
        name: '1-2',
        children: [
        ]
      },
      {
        id: 12,
        name: '1-3',
        children: [
          {
            id: 103,
            name: '1-3-1',
            children: []
          },
          {
            id: 104,
            name: '1-3-2',
            children: []
          }
        ]
      }
    ]
  },
  {
    id: 2,
    name: '2',
    children: [
      {
        id: 20,
        name: '2-1',
        children: [
          {
            id: 200,
            name: '2-1-1',
            children: []
          }
        ]
      },
      {
        id: 21,
        name: '2-2',
        children: []
      }
    ]
  }
];

你期待的结果是什么?实际看到的错误信息又是什么?

期望输出如下结果

let ids = [11, 100, 200]; // 要获取的 id 列表
let res = [
  {
    id: 1,
    name: '1',
    children: [
      {
        id: 10,
        name: '1-1',
        children: [
          {
            id: 100,
            name: '1-1-1',
            children: []
          }
        ]
      },
      {
        id: 11,
        name: '1-2',
        children: [
        ]
      }
    ]
  },
  {
    id: 2,
    name: '2',
    children: [
      {
        id: 20,
        name: '2-1',
        children: [
          {
            id: 200,
            name: '2-1-1',
            children: []
          }
        ]
      }
    ]
  }
]

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
3.6k views
Welcome To Ask or Share your Answers For Others

1 Answer

var ids = [11, 100, 200]; // 要获取的 id 列表
var treeData = [
  {
    id: 1,
    name: '1',
    children: [
      {
        id: 10,
        name: '1-1',
        children: [
          {
            id: 100,
            name: '1-1-1',
            children: []
          },
          {
            id: 101,
            name: '1-1-2',
            children: []
          }
        ]
      },
      {
        id: 11,
        name: '1-2',
        children: [
        ]
      },
      {
        id: 12,
        name: '1-3',
        children: [
          {
            id: 103,
            name: '1-3-1',
            children: []
          },
          {
            id: 104,
            name: '1-3-2',
            children: []
          }
        ]
      }
    ]
  },
  {
    id: 2,
    name: '2',
    children: [
      {
        id: 20,
        name: '2-1',
        children: [
          {
            id: 200,
            name: '2-1-1',
            children: []
          }
        ]
      },
      {
        id: 21,
        name: '2-2',
        children: []
      }
    ]
  }
];

function filter(list, cb) {
  return list.reduce((res, item) => {
    if(item.children && item.children.length) {
      var children = filter(item.children, cb);
      if(children.length) res.push({...item, children});
    } else if(cb(item)) res.push(item);
    return res;
  }, []);
}

filter(treeData, item => ids.includes(item.id))

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
thumb_up_alt 0 like thumb_down_alt 0 dislike
Welcome to 16892 Developer Community-Open, Learning and Share
...