Отображение / фильтрация элементов на основе значений из нескольких массивов

Question

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

filterA: 
     - London - Hong-Kong - Oxford - New York - Toronto 
filterB:
    - BMW, - Nissan, - GTA, - Toyota, - Honda

const areas = ['London', 'Oxford', 'New York'] // contains checked values from the filterA checkbox
const cars = ['BMW', 'Toyota', 'Honda'] // contains checked values from the filterB

Пример элемента Div, который должен быть фильтруется / отображается, если установлен флажок London и BMW:

 <div class="list-item" data-area="London">
    <span class="car">BMW</span>
    This BMW car is in London
 </div>

Я хочу написать что-то вроде:

if(document.querySelector('div[data-area]') === areas && document.querySelector('.car') === cars  ){
 // filter elements that has 'checked cars' in the 'checked areas'
 // array value can be one item or multiple as its based on users' input
}

Пожалуйста, сообщите. Заранее большое спасибо!

Answer 1

const areas = ['London', 'Oxford', 'New York'] // contains checked values from the filterA 
const cars = ['BMW', 'Toyota', 'Honda'] // contains checked values from the filterB

function extractCar(element) {
  return element.querySelector('.car').innerHTML;
}

var filter   = Array.prototype.filter,
    result   = document.querySelectorAll('div[data-area]'),
    filtered = filter.call(result, node => areas.includes(node.dataset.area) && cars.includes(extractCar(node)));

console.log(filtered);

<div class="list-item" data-area="London">
    <span class="car">BMW</span>
    This BMW car is in London
 </div>
 
 <div class="list-item" data-area="Shanghai">
    <span class="car">BMW</span>
    This BMW car is in London
 </div>
 
  <div class="list-item" data-area="Oxford">
    <span class="car">Honda</span>
    This BMW car is in London
 </div>