8wDlpd.png
首页
8wDFp9.png
分类
8wDEOx.png
8wDMfH.png
消息
8wDKte.png
我的
  2. sorting
  3. 搜索具有子项的对象数组

搜索具有子项的对象数组

Tobias Kienzler 2月前
52 0

有一个带有嵌套对象的对象数组。搜索时，需要显示所有请求的结果及其父级const data = [{ \'title\': \'News\', \'children...

有一个带有嵌套对象的对象数组。搜索时，需要显示所有请求的结果及其父级 

const data = [{
  "title": "News",
  "children": [{
    "title": "News1"
  }, {
    "title": "News2",

    "children": [{
      "title": "News22"
    }, {
      "title": "News23"
    }]
  }]
}, {
  "title": "Works"
}]

let searchValue = ""
const handleInput = () => {
  return filteredData = data.filter(item => {
    let itemTitle = item.title.toLowerCase();
    return itemTitle.includes(searchValue.toLowerCase())
  });
}

示例图片

示例图像1

预期输出：

示例图像3

帖子版权声明 1、本帖标题：搜索具有子项的对象数组
    本站网址：http://xjnalaquan.com/
2、本网站的资源部分来源于网络，如有侵权，请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点，并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
5、站长邮箱：yeweds@126.com 除非注明，本帖由Tobias Kienzler在本站《sorting》版块原创发布， 转载请注明出处！
收藏的用户（0） X
正在加载信息~
最新回复 (0)
  • 引用 2楼

    我不知道你为什么会被如此反对，但我想他们更喜欢用文字而不是图像来表示你的预期输出。

  • 引用 3楼

    您需要过滤每个级别并收集嵌套值。 

    const
    filter = (data, string) => data.flatMap(o => {
        if (o.title.toLowerCase().includes(string)) return o;
        const children = filter(o.children || [], string);
        if (children.length) return { ...o, children };
        return [];
    }),
    data = [{ title: "News", children: [{ title: "News1" }, { title: "News2", children: [{ title: "News22" }, { title: "News23" }] }] }, { title: "Works" }],
    result = filter(data, '22');

console.log(result);
    .as-console-wrapper { max-height: 100% !important; top: 0; }

    通过删除空子项，可以采用稍微不同的方法。 

    const
    filter = (data, string) => data.flatMap(({ children = [], ...o }) => {
        children = filter(children, string);
        if (o.title.toLowerCase().includes(string) || children.length) {
            return children.length ? { ...o, children } : o;
        }
        return [];
    }),
    data = [{ title: "News", children: [{ title: "News1" }, { title: "News2", children: [{ title: "News22" }, { title: "News23" }] }] }, { title: "Works" }],
    result = filter(data, '22');

console.log(result);
    .as-console-wrapper { max-height: 100% !important; top: 0; }
返回
作者最近主题：