Skip to content
Advertisement

Filter content based on two dropdown values

I have two dropdowns which function as filters for job postings.

const type = ['all', 'fulltime', 'parttime'];
const department = ['all', 'engineering', 'design'];

Here is the data I’m trying to filter (by default both the dropdowns have a value of all)

let jobs = [
  { 
    role: 'a',
    department: 'engineering',
    type: 'fulltime'
  },
  { 
    role: 'b',
    department: 'design',
    type: 'parttime'
  },
  { 
    role: 'c',
    department: 'engineering',
    type: 'parttime'
  }
] 

Both filters can be active at the same time, thus filtering two-levels.
eg: Department Filter Selected: ‘Engineering’ ([2] returns array of 2 objects) => user selects second filter => Type Filter Selected: ‘fulltime’ ([1] returns array of 1 object)

All clicking all of a filter, it should reset that particular filter only.

Here is what I tried, can’t seem to wrap my head around a reasonable solution.

const filterJobs = () => {
    const { department, type} = filters; //filters selected by user

    if(department === 'all'){
      return;
    } else{
      filteredJobs = jobs.filter((job)=>job.department === department)
    }

    if(type === 'all'){
      return;
    } else{
      filteredJobs = jobs.filter((job)=>job.type === type)
    }
  }

Thanks in advance!

Advertisement

Answer

Use just a single .filter, and in the callback, perform both checks for department and type in separate expressions:

jobs.filter((job) => (
  (department === 'all' || job.department === department) &&
  (type === 'all' || job.type === type)
));
Advertisement