How to Array Filter With Multiple Condition in JavaScript

JavaScript multiple condition filtering with array of conditions?

You can use a higher order filter function to handle applying filter conditions and is passed to your array.prototype.filter function.

const filterData = ({ filters = [], every = false }) => (el) =>
  filters[every ? "every" : "some"]((filterFn) => filterFn(el));

This consumes an options object that defines an array of filter condition functions that accept a single element value/object from your data array and returns the function used for the array filtering.

Example:

// AC AND nonAC
data.filter(filterData({
  filters: [
    ({ AC, nonAC }) => AC && nonAC,
  ],
}))

If your data is in the form

"AC": "false"

Where the booleans are stringified then make the following adjustment to your condition checkers, compare to === 'true':

({ AC, nonAC }) => AC === "true" || nonAC === "true"

After discussion it seems some of these conditions are not mutually inclusive, or rather, they are only mutually inclusive in specific groups.

Still using a Higher Order Function, the logic is tweaked a bit to consume the array of key-value conditions.

Create a mapping function to map your user selected filters ([{ AC: "true" }, ...]) to a groups of "filterBy" values that are mutually inclusive. These will be logical OR'd (||) together while the sets will be exclusive by using logical AND'd (&&) together.

const mapfiltersToSets = (filters) => {
  const filtersObject = filters.reduce((conditions, condition) => {
    const [key, value] = Object.entries(condition).pop();

    switch (key) {
      case "AC":
      case "nonAC":
        return {
          ...conditions,
          acConditions: [...(conditions.acConditions || []), { key, value }]
        };

      case "seater":
      case "sleeper":
        return {
          ...conditions,
          seatSleeper: [...(conditions.seatSleeper || []), { key, value }]
        };

      // add new AND groups here

      default:
        return conditions;
    }
  }, {});
  return Object.values(filtersObject);
};

const filterData = (filters = []) => (el) =>
  mapfiltersToSets(filters).every((filterSet) =>
    filterSet.some(({ key, value }) => el[key] === value)
  );

Example:

// AC AND nonAC
data.filter(filterData([{ AC: "true" }, { nonAC: "true" }]))

Demo with extended dataset and unit tests. Good start to build from.

Filter array of object based on multiple conditions in React

The issue is that you are applying all of your filters instead of just ones that are defined. And also you also should just return false from your filters if they are defined, that is the only way to run through all of them. So your code should look something like this

const filteredAllPersons = oldPersons.filter(person => {
  if (genderFilter && person.gender !== genderFilter) {
    return false
  }
  // apply all other filters the same as above

  // Finally return true because record has satisfied all conditions
  return true
})

How to filter array with multiple conditions in Vuejs?

try like following snippet:

const app = new Vue ({
  el: '#app',
  data() {
    return {
      search: '',
      itemsList: [],
      isLoaded: false,
      selectNum: '',
      userList: [
        {
          id: 1,
          name: "Prem",
          status:"ok"
        },
        {
          id: 2,
          name: "Chandu",
          status:"notok"
        },
        {
          id: 3,
          name: "Shravya",
          status:"ok"
        },
        {
          id: 4,
          name: "kirt",
          status:"notok"
        }
      ]
    }
  },
  created(){
    this.isLoaded = true;
  },
  computed: {
    filteredAndSorted(){
     function compare(a, b) {
       if (a.name < b.name) return -1;
       if (a.name > b.name) return 1;
       return 0;
     }
     const res = this.userList.filter(user => {
          return user.name.toLowerCase().includes(this.search.toLowerCase())
       }).sort(compare)
     if (this.selectNum) {
       return res.filter(user => user.status === this.selectNum )
     }
     return res
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-if="isLoaded">
    <select v-model="selectNum" name="text"> 
      <option value="" selected="selected">Select status</option>
      <option value="ok">ok</option>
      <option value="notok">notok</option>
    </select>
  </div>
  <div class="search-wrapper">  
    <input type="text" v-model="search" placeholder="Search title.."/>
        <label>Search Users:</label>
  </div>  
  <ul>
    <li v-for="user in filteredAndSorted">{{user.name}}</li>
  </ul>
</div>