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);

这将返回与label值匹配的对象。我想过滤'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()}`;
});

然后您可以使用includes方法过滤

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

Angular2过滤器嵌套的对象数组

2 个答案: