使用 lodash 或下划线过滤对象数组

Question

我有以下结构并且此数据显示为中的列表（如我给定的屏幕截图），在这里我想添加一个过滤器，比如如果我在搜索框中输入“a”它应该显示所有有“a”的名字，当我输入全名如“atewart Bower”时，它应该只显示一个列表。到目前为止我这样做

        const searchContact = newData.filter(d => { // here newData is my arr of objs                       
            let alphabet = d.alpha.toLowerCase();
            return alphabet.includes(this.state.searchUserName.toLowerCase())
        })

它 return 是基于用户数组中的“alpha”而不是“name”。我试图使用 Lodash 和 underscore.js，但也没有找到我想要实现的目标。

我尝试了 Lodash

的这段代码

const dd = _.filter(newData, { users: [ { name: this.state.searchUserName } ]});

但它也是 return 当我像 this.state.searchUserName = atewart Bower

一样写全名时的对象数组

[
    { 
      alpha: "a",
      users: [
        {
          id: "1",
          name: "atewart Bower"
        },
        {
          id: "1",
          name: "aatewart Bower"
        },
      ]
    },
    { 
      alpha: "b",
      users: [
        {
          id: "1",
          name: "btewart Bower"
        },
        {
          id: "1",
          name: "bbtewart Bower"
        },
      ]
    }
 ]

Answer 1

它是在 alpha 的基础上进行过滤，因为在过滤器内部，我们使用 alpha 值来检查。

let alphabet = d.alpha.toLowerCase();
return alphabet.includes(this.state.searchUserName.toLowerCase())

要检查用户数组内部，您可以这样做

const getSearchedContacts = (newData, searchUserName) => {
    const searchResults = [];
    newData.forEach((item) => {
        const users = item.users.filter(user => user.name.toLowerCase().startsWith(searchUserName.toLowerCase()));
        if (users.length) searchResults.push({...item, users});
    });
    return searchResults;
};

getSearchedContacts(yourData, 'atewart Bower'); // Returns [{"alpha":"a","users":[{"id":"1","name":"atewart Bower"}]}]

注意：我使用 startsWith 而不是 includes，因为当搜索字符串是例如“atewart Bower”

时，我们只想 return 一个名字

使用 lodash 或下划线过滤对象数组

filter array of object using lodash or underscore

javascript

arrays

object

lodash

underscore.js