How to create a custom chained filter method with new Function

Question

Situation

I've got a table and for each column, the user can set multiple filters, like:

ID is greater then 10 && lower then 40 && is equal to 22

Data

I pass the applied filters with the correct operator and the checking value, like this:

const filters = [
  {
    value: 10,
    operator: '<'
  },
  {
    value: 40,
    operator: '>'
  },
  {
    value: 22,
    operator: '=='
  },
]

One column data could look like this:

const columnData = [10,22,3,1,14,15,69,22,...]

Draft

I want to minimize the filtering and compare the data values with all applied filters only once. Since I don't know what the user is looking for, I want to create a custom chained filter method.

With the new Function-method I thought it will be a perfect use case for a chained filter string, like:

colData < 10 && colData > 40 && colData == 22

Goal

const colVal = 22
const testFn = new Function('colData',
'return colData > 10 && colData < 40 && colData == 22' // <- should be a custom string
)
console.log(testFn(colVal)) // true;

Now I'm stuck to create a custom string that's represents my filters.

I thought, I could create the string in the first place, use it in the testFn-method and compare each value smoothly.

I tried the following:

const colVal = 22
const y = (colData) => `${colData}` + ' > 10 && ' + `${colData}` + ' < 40 && ' + `${colData}` + ' == 22'
const testFn = new Function('y', 'colVal',
'return y(colVal)'
)
console.log(testFn(y, colVal )); // 22 > 10 && 22 < 40 && 22 == 22

Do have a idea to implement a custom string into a new Function method?

Answer 1

You could build your conditional filter string based on the filters array using map and join methods, then pass that string to the main function body string to the Function constructor.

const filters = [{
    value: 10,
    operator: '>'
  },
  {
    value: 40,
    operator: '<'
  },
  {
    value: 22,
    operator: '=='
  },
]

const columnData = [10, 22, 3, 1, 14, 15, 69, 22]

const filterString = filters.map(({ value, operator }, i) => `el ${operator} ${value}`).join(' && ')
const fnString = `return data.filter(el => ${filterString})`
const fn = new Function('data', 'filters', fnString)

console.log(fnString)
console.log(fn(columnData, filters))