filter array of objects based on separate object keys, values

Question

I have the array of people below:

  const FIRST_ARRAY = [
    {
      name: 'Simon',
      age: 32,
      occupation: 'Student'
    },
    {
      name: 'Vera',
      age: 22,
      occupation: 'Developer'
    }
  ];

I would like to filter the array to produce a separate array based on a 'filters' object.

For example if my filters are:

  const FILTERS = {
    age: 32,
    name: 'John',
    occupation: ''
  };

The new array should be empty as no people in the array have the combination of 32 and John. However if my filters are:

 const FILTERS = {
    age: 32,
    name: 'Simon',
    occupation: ''
  }

The new array of people returned will be:

 const NEW_ARRAY = [
    {
      name: 'Simon',
      age: 32,
      occupation: 'Student'
    }
  ];

How can I filter the array of people by iterating over the 'filters' object values? Bare in mind the filters keys and values will dynamically changing all the time.

occupation: '' is misleading as a filter value. Omitting a property would be a bit more logical. — zerkms
– zerkms, Commented Mar 1, 2019 at 0:11
isn't it normal search/filter? like Filter_Array.where(f=>(f.age== age || isnullorEmpty(age)) && (f.name == name || isnullorEmpty(name)) && (c.occupation == occupation || isnullorEmpty(occupation))); Modify in javascript but logic should be similar — Hemant Sakta
– Hemant Sakta, Commented Mar 1, 2019 at 0:14
The occupation can be omitted if the string is empty. However it will exist in the filters object. — Sachin Karia
– Sachin Karia, Commented Mar 1, 2019 at 0:15

Scott Rudiger · Accepted Answer · 2019-03-01 00:24:05Z

5

You could filter as follows:

const FIRST_ARRAY = [
  {
    name: 'Simon',
    age: 32,
    occupation: 'Student'
  },
  {
    name: 'Vera',
    age: 22,
    occupation: 'Developer'
  }
];

const FILTERS = {
  name: 'Simon',
  age: 32,
  occupation: ''
};

const filtered = FIRST_ARRAY.filter(person => Object.entries(FILTERS)
  .every(([key, val]) => val !== '' ? person[key] === val : true));
  
console.log(filtered);

answered Mar 1, 2019 at 0:24

Scott Rudiger

1,31012 silver badges16 bronze badges

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

Comments

Ele · Accepted Answer · 2019-03-01 00:25:09Z

0

You can use the function filter and the function every to check that every key-value are equal to the FILTERS values.

Assuming when within the FILTERS a value is empty then skip it

const FIRST_ARRAY = [{name: 'Simon',age: 32,occupation: 'Student'},{name: 'Vera',age: 22,occupation: 'Developer'}],
      FILTERS = {age: 32,name: 'Simon',occupation: ''},
      keys = Object.keys(FILTERS),
      result = FIRST_ARRAY.filter(o => keys.every(k =>  FILTERS[k] === '' || FILTERS[k] === o[k]));

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

const FILTERS = { age: 32, name: 'John', occupation: '' };

answered Mar 1, 2019 at 0:25

Ele

33.8k7 gold badges43 silver badges80 bronze badges

Comments

Cristian Colorado · Accepted Answer · 2019-03-01 00:26:41Z

You can try something like:

    function compare(item, filter) {
      for (var property in filter) {
        if (filter.hasOwnProperty(property)) {
          let value = filter[property];
          return item.hasOwnProperty(property) && item[property] != '' && value == item[property];
        }
      }
    }
    
    const DATA = [
        {
          name: 'Simon',
          age: 32,
          occupation: 'Student'
        },
        {
          name: 'Vera',
          age: 22,
          occupation: 'Developer'
        }
      ];
      
    const filter = {
        age: 32,
        name: 'Simon',
        occupation: ''
      };
      
    let result = DATA.filter(function(item) {
        return compare(item, filter);
      })
      
      console.log(result);

Collectives™ on Stack Overflow

filter array of objects based on separate object keys, values

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related