使用 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())
        })

它是根据用户数组中的“alpha”而不是“name”返回的。我试图使用Lodash 和underscore.js，但也没有找到我想要在那里实现的目标。

我试过Lodash这个代码

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

但是当我像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”时，我们只想返回一个名称