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

如何解决使用lodash或下划线过滤对象数组

我具有以下结构，并且该数据显示为列表中的内容（如给定的屏幕截图所示），在这里我想添加一个过滤器，例如说如果我在搜索框中输入“ 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())
        })

它是根据users数组内的“ 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",name: "btewart Bower"
        },name: "bbtewart Bower"
        },]
    }
 ]

解决方法

它是基于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”时，我们只想返回一个名字