Angular2過濾器嵌套的對象數組

Question

我有一個對象的數組，如下所示。我試圖在我的angular2應用程序中使用.filter（）方法實現搜索功能。

[{ 
"label": "new", 
"result": [{ 
    "label": "new", 
    "fname": "abc", 
    "lname": "xyz" 
}, { 
    "label": "new", 
    "fname": "abc1", 
    "lname": "xyz1" 
}]}, 
{ 
    "label": "old", 
    "result": [{ 
     "label": "old", 
     "fname": "abc2", 
     "lname": "xyz2" 
    }] 
}] 

我能夠實現使用以下代碼父/一個級過濾：

this.data.filter(item => (item.label.toLowerCase().indexOf(inputText) !== -1); 

這將返回匹配標籤的值的對象。我也想過濾'fname'和'lname'。

Answer 1

您的數據結構不適合從3級數據結構中進行任意字符串查找。

您將最終不得不迭代所有三個級別 - 對象數組，每個對象中的結果數組以及結果數組中的所有對象屬性。

這是一個O（n^3）操作，對於大型數據集可能表現不令人滿意。您可能需要考慮如何才能更好地構建此用例的數據。

Answer 2

我會從服務器獲取數據時創建一個查找變量內每個項目包含所有文本，你想能夠搜索。

但是確保這隻會執行一次，因爲如果您爲每次擊鍵都做到這一點，它將不會非常高效。

// Add searchable string to users 
    users.forEach(u => { 
    u.filterTerm = `${(u.id || '').toLowerCase()} ${(u.email || '').toLowerCase()} ${(u.firstName || '').toLowerCase()} ${(u.lastName || '').toLowerCase()}`; 
}); 

然後，可以使用該方法包括過濾

let filtered = allUsers.filter(u => { 
    return u.filterTerm.includes(filterTerm); 
});