过滤嵌套对象和 arrays

Question

我有一个 Vue 项目，需要在包含嵌套对象的数组中搜索特定的 object，然后返回它。 用户有一个用于搜索的文本输入字段，搜索应该以“title”为目标。

数据如下所示：

const data = 
[{
    "catId": "1",
    "catTitle": "a",
    "exampleArray": [{
        "id": "111",
        "title": "aaa"
    }, {
        "id": "222",
        "title": "bbb"
    }, {
        "id": "333",
        "title": "ccc"
    }]
}, {
    "catId": "2",
    "catTitle": "b",
    "exampleArray": [{
        "id": "444",
        "title": "ddd"
    }, {
        "id": "555",
        "title": "eee"
    }]
}, {
    "catId": "3",
    "catTitle": "c",
    "exampleArray": []
}, {
    "catId": "4",
    "catTitle": "d",
    "exampleArray": [{
        "id": "555",
        "title": "fff"
    }]
}]

我试过了：

return data.filter(item => {
                    return item.catArray.filter(category=> {
                        return category.title.toLowerCase().includes(this.search.toLowerCase())
                    })
                })

例如，如果用户输入是“aaa”，应该返回：

[{
    "catId": "1",
    "catTitle": "a",
    "exampleArray": [{
        "id": "111",
        "title": "aaa"
    }]
}]

搜索还应返回所有匹配结果。

Answer 1

你快到了！

 const data = [{ "catId": "1", "catTitle": "a", "exampleArray": [{ "id": "111", "title": "aaa" }, { "id": "222", "title": "bbb" }, { "id": "333", "title": "ccc" }] }, { "catId": "2", "catTitle": "b", "exampleArray": [{ "id": "444", "title": "ddd" }, { "id": "555", "title": "eee" }] }, { "catId": "3", "catTitle": "c", "exampleArray": [] }, { "catId": "4", "catTitle": "d", "exampleArray": [{ "id": "555", "title": "fff" }] }]; const search = "aa"; console.log(data.filter(item => { return item.exampleArray.some(category=> { return category.title.toLowerCase().includes(search.toLowerCase()) }) })); console.log(data.map(item => { item.exampleArray = item.exampleArray.filter(category=> { return category.title.toLowerCase().includes(search.toLowerCase()) }) return item; }).filter(a=>a.exampleArray.length>0))

我所做的只是在过滤器之后添加一个长度检查。 因为 filter 期望 true 或 false 来知道是否应该包含该元素。 虽然它返回一个包含结果的数组，但空数组是一个真值。 您需要检查数组是否包含要正确过滤的元素。

编辑：我改为使用 FIND 而不是 FILTER。 如果未找到任何内容，Find 将返回假值，而如果找到某些内容，则返回真值（找到的元素）。 这样做的好处是不会遍历整个数组，只要我们找到一些东西就停止。

再次编辑： some是你想要的 function，我们每天都在学习！ 它与 find 的作用相同，但直接返回 true！

Answer 2

您可以借助Array.filter()方法和String.includes()来实现此要求

现场演示：

 const data = [{ "catId": "1", "catTitle": "a", "exampleArray": [{ "id": "111", "title": "aaa" }, { "id": "222", "title": "bbb" }, { "id": "333", "title": "ccc" }] }, { "catId": "2", "catTitle": "b", "exampleArray": [{ "id": "444", "title": "ddd" }, { "id": "555", "title": "eee" }] }, { "catId": "3", "catTitle": "c", "exampleArray": [] }, { "catId": "4", "catTitle": "d", "exampleArray": [{ "id": "555", "title": "fff" }] }]; const searchWord = 'aaa'; const res = data.filter(obj => { obj.exampleArray = obj.exampleArray.filter(({ title }) => title.includes(searchWord)) return obj.exampleArray.length; }); console.log(res);