Filter array by object property values

Question

I am programming a function that will handle javascript array filtering. I know the values by which I want to filter so I know how to do it in a fairly easy way, but I would like the code to be more extensible.

I wrote such a function:

 const items = [
{
    prop1: 'Jotahan',
    prop2: 'London',
    prop3: '1234567'
},
{
    prop1: 'Jones',
    prop2: 'Paris',
    prop3: '987'
}
];

const filters = { prop2: 'Paris', prop3: '987' };

   const handleFilters = (items, filters) => {
        return items.filter((item) => {
            if (filters.prop3 && filters.prop2) {
                return item.prop3 === filters.prop3 && item.prop2 === filters.prop2;
            }

            if (filters.prop3) {
                return item.prop3 === filters.prop3;
            }

            if (filters.prop2) {
                return item.prop2 === filters.prop2;
            }
        });
    }

I am not completely satisfied with it. I think it could be written better. If the 3rd argument comes, I don't want to add it to the if - it should be automatic.

I've searched several topics on stackoverflow, looked through the lodash documentation looking for some good solution but I have no idea what I can do better with this.

Those if (propX) { ... } cases are no-ops. What are they supposed to do? — Andreas
– Andreas, Commented Aug 18, 2022 at 7:29
Your filter should return true if prop1 AND prop2 are equals or only if one of them is equal (OR)? — David Alvarez
– David Alvarez, Commented Aug 18, 2022 at 7:35

David Alvarez · Accepted Answer · 2022-08-18 07:46:42Z

2

If I understood correctly, you want to only keep the items that match all the filter:

const items = [
    {
        prop1: 'Jotahan',
        prop2: 'London',
        prop3: '1234567'
    },
    {
        prop1: 'Jones',
        prop2: 'Paris',
        prop3: '987'
    }
];

const filters = {prop2: 'Paris', prop3: '987'};

const handleFilters = (items, filters) => {
    return items.filter((item) =>
        Object.entries(filters).every(([key, val]) => item[key] === val)
    )
};

console.log(handleFilters(items, filters))

This basically checks that every (key, val) of the filter exists in the item

answered Aug 18, 2022 at 7:46

David Alvarez

1,30613 silver badges23 bronze badges

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

Comments

RenaudC5 · Accepted Answer · 2022-08-18 07:35:30Z

0

private handleFilters (items, ...props) {
    return items.filter(item => props.every(prop => item[prop] === prop));
}

edited Aug 18, 2022 at 7:35

RenaudC5

3,8591 gold badge13 silver badges32 bronze badges

answered Aug 18, 2022 at 7:32

ysurilov

3001 silver badge16 bronze badges

3 Comments

emptyobjects3 Over a year ago

every required type of Array value. In props value I have a object.

Mark Rotteveel Over a year ago

Please don't post only code as answer, but also provide an explanation what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes.

ysurilov Over a year ago

Mark, I'm not expect of upvotes. :) I send the trivial answer on relatively trivial question. And usually developers haven't much time to explain every line in such case, it's not a rocket science I guess. But thank you for advice in any case.

DubiousMaster · Accepted Answer · 2022-08-18 08:02:10Z

To use the filter object dynamically, you could look into using something like Object.keys().

Here's your example code changed to use that:

const items = [
    {
        prop1: 'Jotahan',
        prop2: 'London',
        prop3: '1234567'
    },
    {
        prop1: 'Jones',
        prop2: 'Paris',
        prop3: '987'
    }
];

const filters = { prop2: 'Paris', prop3: '987' };

const handleFilters = (items, filters) => {
    return items.filter(item => {
        return Object.keys(filters).some(filterKey => item[filterKey] === filters[filterKey])
    });
}

It loops through the items, the same as you already were doing. However, now it also loops through the keys set in the filters object. The some() function returns a boolean; true if the callback is true and false if the callback is false. Here it checks if the value in item[filterKey] is the same as the value in filters[filterKey].

It's important to note that this returns the item if any of the filter values matches with an item's property. If all values must be in the filtered item, you'll want to use Object.keys(filters).every(filterKey => item[filterKey] === filters[filterKey]). The every function returns true only if all filterKeys have the same value as the keys checked in item.

It is also possible to use Object.entries(), which allows directly using the value, but for this example I chose to use just the keys, for consistency.

Talha Ahmad · Accepted Answer · 2022-08-18 09:30:45Z

0

You can filter by using Object.key , filter and every method in precise manner.

const items = [
      {
        prop1: 'Jotahan',
        prop2: 'London',
        prop3: '1234567'
      },
      {
        prop1: 'Jones',
        prop2: 'Paris',
        prop3: '987'
      }
    ];
    
    const filters = { prop2: 'Paris', prop3: '987' };
    
    const handleFilter = (items, filters) => {
      return items.filter((item) => Object.keys(filters).every((key) => item[key] === filters[key]));
    }
    
    console.log(handleFilter(items, filters))

edited Aug 18, 2022 at 9:30

answered Aug 18, 2022 at 9:30

Talha Ahmad

112 bronze badges

Comments

ClassHacker · Accepted Answer · 2022-08-18 10:04:14Z

0

You can remove your multiple if blocks by using for..in

const items = [
{
    prop1: 'Jotahan',
    prop2: 'London',
    prop3: '1234567'
},
{
    prop1: 'Jones',
    prop2: 'Paris',
    prop3: '987'
}
];

const filters = { prop2: 'Paris', prop3: '987' };

   const handleFilters = (items, filters) => {
        return items.filter((item) => {
            for(const key in filters) {
                if (filters[key] !== item[key]) {
                    return false;
                }
            }
            return true;
        });
    }
    
console.log(handleFilters(items, filters))

It does the same as your code was doing.

edited Aug 18, 2022 at 10:04

answered Aug 18, 2022 at 8:09

ClassHacker

3943 silver badges12 bronze badges

Comments

Prashant Shah · Accepted Answer · 2022-08-18 16:15:28Z

Some Improvement over @David Alvarez approach, here i have used Object.keys instead of Object.entries as Object.key is faster than Object.entries here is the comparison: https://www.measurethat.net/Benchmarks/Show/3685/0/objectentries-vs-objectkeys-vs-objectkeys-with-extra-ar

const items = [
    {
        prop1: 'Jotahan',
        prop2: 'London',
        prop3: '1234567'
    },
    {
        prop1: 'Jones',
        prop2: 'Paris',
        prop3: '987'
    }
];

const filters = {prop2: 'Paris', prop3: '987'};

const handleFilters = (items, filters) => (
    items.filter((item) =>
        Object.keys(filters).every(key => item[key] === filters[key])
    )
);

console.log(handleFilters(items, filters))

Collectives™ on Stack Overflow

Filter array by object property values

6 Answers 6

Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related