美文网首页时光轴
递归对树形结构数据处理 -- JS模糊查询

递归对树形结构数据处理 -- JS模糊查询

作者: 侯工 | 来源:发表于2019-08-09 11:50 被阅读0次

    下面是我们要处理的数据,简写:

    let arr = [
        {
            title: '你好吗?',
            children: [
                {
                    title: '很好啊',
                    children: null
                },
                {
                    title: '是吗',
                    children: null
                }
            ]
        },
        {
            title: '卡卡卡',
            children: [
                {
                    title: '非常好芬',
                    children: null
                }
            ]
        },
        {
            title: '第三方的',
            children: null
        }
    ];
    

    再搜索框输入 “好” 字时,希望树形结构中带有 “好” 字的项显示,即使父节点没有 “好” 字,但子节点含有,父节点仍要返回;代码实现如下:

    const rebuildData=(value, arr) => {
      let newarr = [];
      arr.forEach(element => {
        if (element.children && element.children.length) {
          const ab = rebuildData(value,element.children);
          const obj = {
            ...element,
            children: ab
          };
          if (obj.title.indexOf(value) > -1 || (ab && ab.length)) 
            newarr.push(obj);
          }
        } else {
          if (element.title.indexOf(value) > -1) {
            newarr.push(element);
          }
        }
      });
      return newarr;
    };
    console.log(rebuildData( '好', arr));
    

    输出如下图:


    相关文章

      网友评论

        本文标题:递归对树形结构数据处理 -- JS模糊查询

        本文链接:https://www.haomeiwen.com/subject/fnbcjctx.html