Как отфильтровать элементы страницы с Jquery

Question

У меня есть страница, которую я создаю, используя JS из данных API.

Я хотел бы отфильтровать данные на основе двух параметров фильтра: Местоположение и Отдел.

Я мог бы сделать это довольно легко, если бы в любой момент времени была выбрана только одна опция фильтра, но чувствую, что любая комбинация параметров фильтра может быть выбрана в любой момент, я довольно потерян.

Пока что моя JS функция для создания каждого элемента на странице выглядит следующим образом:

function createOffer(job){
        var $div = $('<div>', {'class': 'job-listing'});
        var $divDetails = $('<div>', {'class': 'job-listing__details'});
        var $title = $('<h2>'+job.title+'</h2>').addClass('job-listing__title');
        var $location = $('<span data-type="location" data-location="'+job.city+','+job.state+'">Location: </span>').addClass('job-listing__detail location');
        var $department = $('<span data-type="department" data-department="'+job.department+'">Department: </span>').addClass('job-listing__detail job-listing__detail--department department');
        var $viewMoreBtn = $('<a>+View Details</a>').addClass('job-listings__view-more');
        var $divViewMore = $('<div>', {'class': 'job-listing__more'});

        if(!allLocations.includes(job.city+','+job.state)){

            allLocations.push(job.city+','+job.state);

        }

        if(!allDepartments.includes(job.department)){
            allDepartments.push(job.department);
        }

        $div.append($title);
        $divDetails.append($location);
        $divDetails.append(''+job.city+','+job.state);
        $divDetails.append($department);
        $divDetails.append(''+job.department);
        $divViewMore.append(job.description);
        $div.append($divDetails);
        $div.append($divViewMore);
        $div.append($viewMoreBtn);
        allJobs.push($div);
        $jobsContainer.append($div);

    }

Как бы я go о фильтрации с двумя вариантами фильтрации мог выбрать несколько параметров фильтра в любой момент времени?

Answer 1

Может быть что-то вроде этого:

const $jobLocationFilter = $('#jobLocationFilter').val(); // Pretend it's a text field
const $jobDepartmentFilter = $('#jobDepartmentFilter ').val(); // Pretend it's a text field

const jobsFiltered = jobListFromDatabase.filter(job => 
     // If job location filter has value, filter by it, else includes this job (returns true)
    ( $jobLocationFilter ? job.location === $jobLocationFilter : true )
    && 
     // If job dep. filter has value, filter by it, summing with the previous filter
    ( $jobDepartmentFilter ? job.department === $jobDepartmentFilter : true )

    /* 
     And this could go on with multiple filters, 
     just adding && and another expression to filter. e.g:
       `
        ( $jobMinSalaryFilter ? job.salary >= $jobMinSalaryFilter : true )
         && 
         ... others
       `
    */
);

// Function to render the filtered jobs
renderJobs(jobsFiltered);