How to filter array of objects using customized input as filters

Question

Using a multi select dropdown where i have an array of objects where i want to filter it out based on user input such as

[{
        "ServiceArea": "NON-CIO",
        "ManagingDirector": "qwe",
        "Lead": "abc",
        "Manager": "xyz"
        "id":"1",
        "Designation":"COO"
    },
    {
        "ServiceArea": "NON-CIO",
        "ManagingDirector": "dfg",
        "Lead": "hgf",
        "Manager": "lkj"
        "id":"2",
        "Designation":"CTO"
    },
    {
        "ServiceArea": "NON-CIO",
        "ManagingDirector": "out",
        "Lead": "poi",
        "Manager": "uyt",
        "id":"43",
        "Designation":"COO"
    },
    {
        "ServiceArea": "4500-CIO",
        "ManagingDirector": "yhh",
        "Lead": "trr",
        "Manager": "nbb"
        "id":"403",
        "Designation":"CTO"
    }
]

Custom user input 1st time-

ServiceArea = ["NON-CIO"]

I should be getting first three records. Second time user inputs

ManagingDirector = ["dgf","qwe"]

Here i should be getting first two records. I am using this function but it seems to append the array not replace.

//airData is main array

array.forEach((item)=>{
 var name = this.airData.filter( el=>el.ManagingDirector == item );
 this.airData.push.apply(this.finalArr,name);
});

Please post ONE minimal reproducible example of your attempt, noting input and expected output using the [<>] snippet editor you now use just for formatting — mplungjan
– mplungjan, Commented Dec 16, 2022 at 7:57
I have mentioned 2 inputs as its a cascading multiselect so i need to filter the array as user selects the options. — Rahul Jain
– Rahul Jain, Commented Dec 16, 2022 at 8:00
Also why push in a filter? Just use the result of the filtering. And use something like result = listYouAreFiltering.filter(({ManagingDirector}) => userInputArray.includes(ManagingDirector)) — mplungjan
– mplungjan, Commented Dec 16, 2022 at 8:00
If the user input is ["a","s"] i used the loop to find the object and push into the final array. Can you suggest any other method? — Rahul Jain
– Rahul Jain, Commented Dec 16, 2022 at 8:10
When array = ["dgf","qwe"], you mentioned you should be getting first two records. That looks like a typo. qwe is in the first and third objects. And the second object has dfg not dgf. So, you'll get the first and third objects in that case. — adiga
– adiga, Commented Dec 16, 2022 at 8:10

adiga · Accepted Answer · 2022-12-16 10:31:29Z

2

Assuming a filters object like this

const data = [{ServiceArea:"NON-CIO",ManagingDirector:"qwe",Lead:"abc",Manager:"xyz"},{ServiceArea:"NON-CIO",ManagingDirector:"dfg",Lead:"hgf",Manager:"lkj"},{ServiceArea:"NON-CIO",ManagingDirector:"qwe",Lead:"poi",Manager:"uyt"},{ServiceArea:"4500-CIO",ManagingDirector:"yhh",Lead:"trr",Manager:"nbb"}];

const filters = {
  ServiceArea: ["NON-CIO"],
  ManagingDirector: ["dgf", "qwe"],
  Manager: []
}

const result = data.filter(e =>
  Object.entries(filters).every(([key, vals]) =>
    vals.length === 0 || vals.includes(e[key])))

console.log(result)

edited Dec 16, 2022 at 10:31

adiga

35.4k9 gold badges65 silver badges88 bronze badges

answered Dec 16, 2022 at 8:56

gog

11.4k2 gold badges29 silver badges42 bronze badges

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

8 Comments

Rahul Jain Over a year ago

Hi, will this handle empty array scenario too. If user decides to lets say remove managingdirector input from UI. The array becomes blank now only servicearea should work.

gog Over a year ago

@RahulJain: no, you need something like val.length === 0 || vals.includes...

Rahul Jain Over a year ago

Can you give an example? As i have 6 different arrays where input gets stored and user can anytime deselect or select which will make each array sometimes empty also.

Rahul Jain Over a year ago

Aslo if i don't have any value in the beginning .includes() gives error of does not exist on type unknown

adiga Over a year ago

@RahulJain that's a ts error, you can search for it. There are plenty of examples

|

Collectives™ on Stack Overflow

How to filter array of objects using customized input as filters

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related