In JavaScript, how can I filter an array with dynamic conditions?

This is a simplified example of a problem I have on a website.

I have an array with some items like this:

var testArr = ["Jeremy", "John", "Hank", "Hal"];

If I know what the filters are, I can filter it like this:

var testArr2 = testArr.filter(function (item){
    return item.length < 5 &&
			item.startsWith("H");
});

On my website, I have an interface where the user can select several filters. In this example, the user would be able to decide to filter by either length or what the value starts with. I need to be able to add conditions to that return dynamically or find some other way to filter. I tried some of the answers at he SO thread https://stackoverflow.com/questions/31831651/javascript-filter-array-multiple-conditions, but I am having trouble applying that to my example.

Thanks in advance!

You could store the single filters in an array as function and filter by checking each filter function with the actual value.

<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var array = ["Jeremy", "John", "Hank", "Hal", "Hermine"],
filters = {
smallerThanFive: item => item.length < 5,
startsWithH: item => item.startsWith('H')
}
selected = [filters.smallerThanFive, filters.startsWithH],
result = array.filter(item => selected.every(f => f(item)));

console.log(result);

<!-- end snippet -->

Can't you just ask the user the two parameters, the length and the starting value, storing them in two variables and then using them as the values for the filter() function?<br>
Something like this:

var maxLength = userLengthInput; //Get this value from the user.
var startValue = userStartValueInput; //Get this value from the user.

var testArr2 = testArr.filter(function (item){
    return item.length < maxLength && item.startsWith(startValue);
});

You could isolate the cases and return true or false individually, or you can combine all conditions into one big boolean expression.

For example:

var testArr2 = testArr.filter(function (item){
    if (checkBoxCheckedForRejectStringWithJustOneCharacter() &&
        item.length === 1) return false;
    if (checkBoxCheckedForAcceptingAllStringsBeginningWithZ() &&
        item[0].toLowerCase() === "z") return true;
    return item.length < 5 &&
            item.startsWith("H");
});

It just depends on your UI and you can customize the conditions in your code.

Just ask.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const testArr = ["Jeremy", "John", "Hank", "Hal"];

const filterIt = (arr,len,sw) => {
  return arr.filter(item => {
    let okLength = len === null || (len && len > 0 && item.length<len);
    let okSw = !sw  || (sw && item.startsWith(sw));
    return okLength && okSw;
  })
}

console.log(filterIt(testArr,null,"H"))
console.log(filterIt(testArr,5))
console.log(filterIt(testArr,4,"H"))

<!-- end snippet -->

For simple usage it's better to have a class Filter containing all filtering logic. Then instantiate it with filters we want and apply them to the input we already have.

Take a look at the code below. It's more readable.

For the sake of extendability, you can also put all filtering logics into individual class and just use those classes in your main Filter class.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var testArr = ["Jeremy", "John", "Hank", "Hal"];

function Filter(filters) {
  this.filters = filters;
}

Filter.prototype.filterByLength = function(items, value) {
  return items.filter(function(item) {
    return item.length < value
  })
};

Filter.prototype.filterByValue = function(items, value) {
  return items.filter(function(item) {
    return item.startsWith(value);
  })
};

Filter.prototype.filter = function(items) {
  return Object.entries(this.filters)
    .reduce(function (final, [key, value]) {
    return final && this[key](items, value)
  }.bind(this), true)
};

var instance = new Filter({
  filterByLength: 5,
  filterByValue: 'H'
})

var result = instance.filter(testArr)
console.log(result)

<!-- end snippet -->

Here an example with HTML/CSS/JS:

https://codepen.io/Karkael/pen/zYxpWqR

function showFilteredList() {
  var filterLength = formFilter["string-length"].value;
  var filterStarts = formFilter["string-starts"].value;
  showList(testArr.filter(function (item) {
    if (filterLength.length && item.length >= parseInt(filterLength)) return false;
    if (filterStarts.length && !item.startsWith(filterStarts)) return false;
    return true;
  }));
}

Hope it helps you!