如何在含children的JSON对象数组中搜索name字段

我正在为折叠面板数据创建搜索过滤器，需要同时搜索父级的name字段及子级children中的name字段。目前实现的函数仅能搜索父级name，无法检索children内的name。现有代码如下：

let filteredTiles = this.tileData.filter((value) => {  //tileData is the JSON array
    return value.name.toLowerCase().indexOf(searchValue) != -1 ? value : null;
});

JSON数据示例：

[
    {
      "name": "First",
      "image": "https://img.freepik.com/free-vector/football-2022-tournament-cup-background_206725-604.jpg?size=626&ext=jpg",
      "children": [
        {
          "name": "Firstone",
          "image": "https://img.freepik.com/free-vector/hand-painted-watercolor-abstract-watercolor-background_23-2149005675.jpg?size=626&ext=jpg",
          "url": "http://www.google.com"
        },
        {
          "name": "Firsttwo",
          "image": "https://img.freepik.com/free-vector/hand-painted-watercolor-abstract-watercolor-background_23-2149005675.jpg?size=626&ext=jpg",
          "url": "http://www.google.com"
        },
        {
          "name": "Firstthree",
          "image": "https://img.freepik.com/free-vector/hand-painted-watercolor-abstract-watercolor-background_23-2149005675.jpg?size=626&ext=jpg",
          "url": "http://www.google.com"
        }
      ]
    },
    {
      "name": "Second",
      "image": "https://media.istockphoto.com/id/517188688/photo/mountain-landscape.jpg?s=612x612&w=0&k=20&c=A63koPKaCyIwQWOTFBRWXj_PwCrR4cEoOw2S9Q7yVl8=",
      "children": [
        {
          "name": "Secondone",
          "image": "https://img.freepik.com/free-vector/hand-painted-watercolor-abstract-watercolor-background_23-2149005675.jpg?size=626&ext=jpg",
          "url": "http://www.google.com"
        },
        {
          "name": "Secondtwo",
          "image": "https://media.istockphoto.com/id/517188688/photo/mountain-landscape.jpg?s=612x612&w=0&k=20&c=A63koPKaCyIwQWOTFBRWXj_PwCrR4cEoOw2S9Q7yVl8=",
          "url": "http://www.google.com"
        },
        {
          "name": "Secondthree",
          "image": "https://img.freepik.com/free-vector/hand-painted-watercolor-abstract-watercolor-background_23-2149005675.jpg?size=626&ext=jpg",
          "url": "http://www.google.com"
        }
      ]
    }
]

解决方案 #

基础实现：匹配父级或子级并保留整个父项

核心逻辑是同时检查父级name和子级数组中是否存在匹配项，使用includes替代indexOf更直观，同时统一处理大小写避免敏感问题：

// 统一转换搜索关键词为小写
const lowerSearchValue = searchValue.toLowerCase();

let filteredTiles = this.tileData.filter((value) => {
    // 检查父级name是否匹配
    const parentMatches = value.name.toLowerCase().includes(lowerSearchValue);
    // 检查子级是否有任意一个name匹配
    const childMatches = value.children.some(child => 
        child.name.toLowerCase().includes(lowerSearchValue)
    );
    // 满足任一条件则保留该父级项
    return parentMatches || childMatches;
});

进阶实现：仅保留匹配的子项

如果希望折叠面板展开后只显示匹配的子项，可以在过滤父级后，对每个父级的children进行二次过滤，同时避免修改原始数据：

const lowerSearchValue = searchValue.toLowerCase();

let filteredTiles = this.tileData
    .filter((value) => {
        const parentMatches = value.name.toLowerCase().includes(lowerSearchValue);
        const childMatches = value.children.some(child => 
            child.name.toLowerCase().includes(lowerSearchValue)
        );
        return parentMatches || childMatches;
    })
    .map(item => {
        // 过滤出匹配的子项
        const filteredChildren = item.children.filter(child => 
            child.name.toLowerCase().includes(lowerSearchValue)
        );
        // 父级匹配时保留所有子项，否则只保留匹配的子项
        return {
            ...item,
            children: item.name.toLowerCase().includes(lowerSearchValue) ? item.children : filteredChildren
        };
    });

内容的提问来源于stack exchange，提问作者Syed Abdul Hannan