filter array of object using lodash or underscore

Question

I have the following structure and this data is displaying as the list in (as in my given screenshot), here I want to add a filter, like say If I put "a" in my search box it should display all the names which has "a" and when I type the full name like "atewart Bower" it should only show the one list. So far I doing this

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

it is returning on the basis of "alpha" not "name" inside the users array. I was trying to use Lodash and underscore.js, but didn't find what I want to achieve there too.

I tried this code of Lodash

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

but it also return the array of object when I write the full name like when 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"
        },
      ]
    }
 ]

Abito Prakash · Accepted Answer · 2020-09-20 05:55:47Z

1

It is filtering on basis of alpha because inside the filter, we are using alpha value to check.

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

To check inside the users array, you can do something like this

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"}]}]

Note: I'm using startsWith instead of includes because we want to return only one name when search string is for example "atewart Bower"

edited Sep 20, 2020 at 5:55

answered Sep 20, 2020 at 5:24

Abito Prakash

4,8002 gold badges16 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

shashi verma Over a year ago

Thanks for the reply, what will happen If I type only "a"? does it work or do I have to type the full name 'atewart Bower' ?

shashi verma Over a year ago

Thanks it is working and introducing me for the new array method startWith but here I am getting only this object in array [{id: "1",name: "atewart Bower"}] and I want output like [ { alpha: "a", users: [ { id: "1", name: "atewart Bower" }, ] } ] and how do we fix the casing issue, if someones name start with capital char then I also have to to type it in capital case

Abito Prakash Over a year ago

Hi @shashiverma, I have changed the function a bit to get the desired result. And also good catch about the casing of letters, I have added the toLowerCase function before checking startsWith to ensure check is case insensitive.

Collectives™ on Stack Overflow

filter array of object using lodash or underscore

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related