CODEWITHSUNDEEP
javascriptarrays
mrcoulson
mrcoulson

Reputation: 1403

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 javascript filter array multiple conditions, but I am having trouble applying that to my example.

Thanks in advance!

Upvotes: 3

Views: 7323

Answers (6)

Nina Scholz
Nina Scholz

Reputation: 386550

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

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);

Upvotes: 20

karkael
karkael

Reputation: 473

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!

Upvotes: 1

agtabesh
agtabesh

Reputation: 568

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.

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)

Upvotes: 1

mplungjan
mplungjan

Reputation: 177688

Just ask.

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"))

Upvotes: 1

nonopolarity
nonopolarity

Reputation: 150976

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.

Upvotes: 1

CrystalSpider
CrystalSpider

Reputation: 389

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?
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);
});

Upvotes: 1

Related Questions