使用 lodash 或下划線過濾 object 數組

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這樣寫全名時，它也會返回 object 的數組

[
    { 
      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”時我們只想返回一個名稱