Динамическое сравнение многомерного массива/значений для нескольких атрибутов/значений данных

Question

У меня есть несколько выборок, настроенных как фильтры для фильтрации (скрыть/показать) элементы DOM в определенном разделе страницы. Секции устанавливаются как это (упрощенный):

<section id="people"> 
    <div data-filtervals="{"titleLevel":["2"],"titleFunction":["4","13"]}">John Doe</div> 
    . 
    . 
    . 
    <div data-filtervals="{"titleLevel":["1"],"titleFunction":["2","3","10"]}">Sally Smith</div> 
</section> 

Мои фильтры производят массив, как это в console.log (фильтр):

titleFunction: Array[2] 
    0: "1" 
    1: "2" 
    length: 2 
titleLevel: Array[3] 
    0: "1" 
    1: "2" 
    2: "3" 
    length: 3 

Я пытаюсь написать функцию, которая будет перебирать над ........ из #people > div и если данные-key (-ы) не указаны в [ключевом] значении фильтра, скройте divs.

Таким образом, в приведенном выше примере John Doe будет скрыт, потому что его заголовок dataLevel AND data-titleFunction не включен в массив фильтров. В значениях атрибутов данных есть перекрытия, поэтому объединение их в один массив невозможно, а устаревший код не позволяет мне изменить это на данный момент.

Мой вызов больше связан с созданием функции Javascript (или jQuery), которая может динамически сравнивать один или несколько фильтров с атрибутами данных с соответствующими ключами. Я смог заставить фильтр работать для/или но не динамически фильтровать несколько фильтров, если только я его не жестко кодирую.

Я посмотрел в .some() но держать удар в стене с логикой и другим SO «Array в массиве» решение like this и this, но я обнаружил, что они, кажется, не вполне решить эту проблему.

РЕДАКТИРОВАТЬ: я решил объединить атрибуты данных в один атрибут данных со значением будучи JSON с помощью клавиш, соответствующих клавиш фильтра; возможно, это облегчит сравнение. Все еще ищут решение, пока я работаю над ним.

Answer 1

Хорошо, вот моя попытка. Я не знаю, откуда ваши фильтры, но если они динамические, я надеюсь, что они находятся в одном объекте. С этой гипотезы я сделал solution.I'm также предполагаю, что вы нашли способ организации дивы в один массив объектов

Так assumming что

var filters = {titleLevel:[1,2],titleFunction:[1,2,3]}; 
var divs = [{titleLevel:[2],titleFunction:[4,13]},{titleLevel:[1],titleFunction:[2,3,10]}]; 
var hasOverLap = function(arr1,arr2){ 
    var flag = false; 
    arr1.forEach((item)=>{ 
     if(arr2.indexOf(item) != -1){flag = true;} 
    }); 
    return flag; 
}; 

Следующий код вы должны получить объект отфильтрованных divs

divs.filter(div=>{ 
    for(var key in div){ 
     if(!hasOverLap(div[key],filters[key])){ 
      return false; 
     } 
    } 
    return true; 
}); 

Это не полное решение, но я надеюсь, что это поможет вам начать работу.