過濾嵌套對象和 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);