JavaScript: how to iteratively filter an array?

Question

I want to be able to filter an array with one or many conditions.

Consider this sample data & filter criteria:

var data = [
  {company: "Acme", fiscal_period: '01-2019', value: 10},
  {company: "Acme", fiscal_period: '02-2019', value: 15},
  {company: "Wonka", fiscal_period: '01-2019', value: 8},
  {company: "Wonka", fiscal_period: '02-2019', value: 11}
]

var filter = [{field: "company", value: "Acme"}]
console.log(myFilterFunction(data,filter));
// Desired output 
// [
//   {company: "Acme", fiscal_period: '01-2019', value: 10},
//   {company: "Acme", fiscal_period: '02-2019', value: 15}
// ]

// Now use two filters:
var filter = [{field: "company", value: "Acme"},{field: "fiscal_period", value: "01-2019"}]
console.log(myFilterFunction(data,filter);
// Desired output 
// [
//   {company: "Acme", fiscal_period: '01-2019', value: 10},
// ]

But how to write the myFilterFunction?

I know how to make it work with a static filter:

myFilterFunction = function(data,filter){

  return data.filter(function(el){
    return el[filter.field] === filter.value;
  });

}

console.log(myFilterFunction(data,{field: "company", value: "Acme"});

But how to make it work dynamically if I want to have multiple filters?

Pranav C Balan · Accepted Answer · 2019-03-29 18:32:04Z

Pass multiple field data as an array and use Array#every method to check all filters which return true only if all return values are true.

myFilterFunction = function(data,filters){    
  return data.filter(function(el){
    return filters.every(filter => el[filter.field] === filter.value);
  });    
}

console.log(myFilterFunction(data,[{field: "company", value: "Acme"},{field: "value", value: 10}]));

var data = [{
    company: "Acme",
    fiscal_period: '01-2019',
    value: 10
  },
  {
    company: "Acme",
    fiscal_period: '02-2019',
    value: 15
  },
  {
    company: "Wonka",
    fiscal_period: '01-2019',
    value: 8
  },
  {
    company: "Wonka",
    fiscal_period: '01-2019',
    value: 11
  }
]

myFilterFunction = function(data, filters) {
  return data.filter(function(el) {
    return filters.every(filter => el[filter.field] === filter.value);
  });
}

console.log(myFilterFunction(data, [{
  field: "company",
  value: "Acme"
}, {
  field: "value",
  value: 10
}]));

With ES6 Destructuring parameter and arrow function.

myFilterFunction = (data,filters) => {    
  return data.filter(el => filters.every(({ field, value }) => el[field] === value));    
}

var data = [{
    company: "Acme",
    fiscal_period: '01-2019',
    value: 10
  },
  {
    company: "Acme",
    fiscal_period: '02-2019',
    value: 15
  },
  {
    company: "Wonka",
    fiscal_period: '01-2019',
    value: 8
  },
  {
    company: "Wonka",
    fiscal_period: '01-2019',
    value: 11
  }
]


    myFilterFunction = (data,filters) => {    
      return data.filter(el => filters.every(({ field, value }) => el[field] === value));    
    }

console.log(myFilterFunction(data, [{
  field: "company",
  value: "Acme"
}, {
  field: "value",
  value: 10
}]));

jonathan Heindl · Accepted Answer · 2019-03-29 18:45:47Z

0

data.filter(el=>{
    for(let t in filterArray){
        if(el[t]!=filterArray[t]){
            return false;
        }
    }
    return true;
})

like this

edited Mar 29, 2019 at 18:45

answered Mar 29, 2019 at 18:24

jonathan Heindl

8817 silver badges21 bronze badges

1 Comment

jonathan Heindl Over a year ago

Yeah I only figured out to I need to invert the equals halfway through ^^

Collectives™ on Stack Overflow

JavaScript: how to iteratively filter an array?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related