Попытка выбрать фильтр

Question

Я хочу связать оба моих фильтра, чтобы получить определенный фильтр для моего фильтра карт Google. Если маркеры фильтра по категории получили значение, я хочу, чтобы мой фильтр по сеансу получил значение из фильтра по категории, а затем в сочетании с моим фильтром по сеансу.

Это мой код, фильтр по категории и по сеансу:

 // filter markers by category
  filterMarkers = function (category) {
      for (i = 0; i < gmarkers1.length; i++) {
          marker = gmarkers1[i];
          // If is same category or category not picked
          if (marker.category == category || category.length === 0) {
              marker.setVisible(true);

          }
          // categories don't match 
          else {
              marker.setVisible(false);
          }
      }
  }

  // filter markers by session
  filterMarkersx = function (session) {
      for (i = 0; i < gmarkers1.length; i++) {
          marker = gmarkers1[i];
          // If is same session or session not picked
          if (marker.session == session || session.length === 0) {

              marker.setVisible(true);


          }
          // session don't match 
          else {
              marker.setVisible(false);
          }
      }
  }

и это мой вариант выбора кода для получения значения:

  <div class="controls">Filter By :
    <select id="type" onchange="filterMarkers(this.value);">
   <option value="">Merchant Grub</option>
   <option value="STARBUCKS">STARBUCKS</option>
   <option value="SIMPLY">SIMPLY</option>
   <option value="SHIHLIN">SHIHLIN</option>
   <option value="RE JUVE">RE JUVE</option>
   <option value="PUYO">PUYO</option>
   <option value="LOTTERIA">LOTTERIA</option>
   <option value="KFC">KFC</option>
   <option value="HOP HOP">HOP HOP</option>
   <option value="DOMINOS">DOMINOS</option>
   <option value="CIRCLE K">CIRCLE K</option>
   <option value="CHATIME">CHATIME</option>
   <option value="CFC">CFC</option>
   <option value="BURGER KING">BURGER KING</option>
   <option value="BREADLIFE">BREADLIFE</option>
   <option value="BAKMI GM">BAKMI GM</option>
   <option value=" AUNTIE ANNE'S">AUNTIE ANNE'S</option>
    </select>
  </div>

    <div class="controls">Filter By :
    <select id="type" onchange="filterMarkersx(this.value);">
   <option value="">IN SESSION</option>
   <option value="false">FALSE</option>
    <option value="">TRUE</option>
    </select>
  </div>

Как мне связать оба моих фильтра?

Например: если я выберу starbucks в фильтре по категории и выберу false в фильтре по сеансу, я могу получить значение starbucks false session.

Заранее спасибо,

Kraken

Answer 1

Для меня эти функции filterMarkers и filterMarkersx на самом деле не являются "фильтрами", так как они изменяют элементы gmarkers вместо того, чтобы возвращать подмножество этого массива. С точки зрения фильтрации, я бы переписал такой код:

1. объявить функции фильтрации

// returns a filtering function to be passed to Array.prototype.filter parameterized with `category`
var filterByCategory = function (category) {
  return function (marker) {
    return !category.length || marker.category == category;
  }
};

// returns a filtering function to be passed to Array.prototype.filter parameterized with `session`
var filterBySession = function (session) {
  return function (marker) {
    return !session.length || marker.session == session;
  }
};

Кстати, поскольку это те же самые функции, которые изменяют только проверяемое свойство, вы можете разложить их на:

var filterBy = function (name, object) {
  return function (marker) {
    return !object.length || marker[name] == object;
  }
};

2. используя фильтры

// set all visibility to false for starters
gmarkers.forEach(function (m) {
  m.setVisible(false);
});
// apply chained filtering then set visibility to true on resulting subset
gmarkers
  .filter(filterBy('category', category)) // or .filter(filterByCategory(category))
  .filter(filterBy('session', session)) // or .filter(filterBySession(session))
  .forEach(function (marker) {
    marker.setVisible(true);
  });

Таким образом, вы можете контролировать, используете ли вы цепные фильтры или используете только один из них.

ОБНОВЛЕНИЕ: более четкое определение использования

Теперь, когда у нас есть логика, мы хотим подключить этот фрагмент кода к вашему HTML.

Давайте обернем код из части "2. Используя фильтры" в функцию:

// assuming vanilla JS: binding the function to `document`
// (the purpose is just to make it callable from the HTML)
document.setMarkersVisibility = function () {
  // first, fetch data from both <select> (category and session)
  var selectCategory = document.getElementById('selectcategory');
  var selectSession = document.getElementById('selectsession');
  var category = selectCategory.options[selectCategory.selectedIndex].value;
  var session = selectSession .options[selectSession .selectedIndex].value;
  /* INSERT PART 2. CODE HERE */
};

Теперь нам нужно провести рефакторинг HTML, потому что оба ваших <select> имеют одинаковое значение для id, что неверно. И нам нужно вызвать нашу новую функцию. Учитывая код выше, я назвал их selectcategory и selectsession:

<select id="selectcategory" onchange="setMarkersVisibility()">

и

<select id="selectsession" onchange="setMarkersVisibility()">

Это должно быть все, что нужно.