Angular2过滤器嵌套的对象数组

问题描述：

我有一个对象的数组，如下所示。我试图在我的angular2应用程序中使用.filter（）方法实现搜索功能。Angular2过滤器嵌套的对象数组

[{ 
"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'。

答

您的数据结构不适合从3级数据结构中进行任意字符串查找。

您将最终不得不迭代所有三个级别 - 对象数组，每个对象中的结果数组以及结果数组中的所有对象属性。

这是一个O（n^3）操作，对于大型数据集可能表现不令人满意。您可能需要考虑如何才能更好地构建此用例的数据。

答

我会从服务器获取数据时创建一个查找变量内每个项目包含所有文本，你想能够搜索。

但是确保这只会执行一次，因为如果您为每次击键都做到这一点，它将不会非常高效。

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

Angular2过滤器嵌套的对象数组

相关推荐