Выбирает фильтр на js

Question

Я учусь js, и теперь у меня есть задача отфильтровать массив некоторых видов точек. В начале у меня есть 4 выбора с некоторыми опциями и карта, где отображается 10 пинов. Каждая булавка - это как точка на карте, где кто-то снимает квартиру, дом или что-то еще. Выбранные должны фильтровать эти контакты по четырем параметрам: типу, стоимости, комнатам и жителям. Я запрограммировал фильтры на выбор, но они делают это каждый для себя. Мне нужно несколько фильтров, но когда я использую два (или более) выбора, булавки фильтруют только по последнему использованному выбору.

И живое поле битвы, где я это делаю. http://demo.tlpunity.beget.tech/academy/book/

Вот код.

var secondRender = function(arr) {
    mapPins.innerHTML = '';
    articleList.innerHTML = '';
    render(arr);
};

var allElRender = function(arr) {
    mapPins.innerHTML = '';
    articleList.innerHTML = '';
    render(arr);
};

var allPinsArr = [];
var selects = document.querySelectorAll('.map__filter');
for(var i = 0;i < selects.length; i++) {

    selects[i].addEventListener('change', function() {
        var selectId = this.id;

        if( selectId === 'housing-type'){
            var typeValue = document.getElementById('housing-type').value; 
            var typeOptions = document.getElementsByClassName('map__filter')[0].getElementsByTagName('option');
            for(var i=0; i<typeOptions.length; i++){

                if(typeValue == near[i].offer.type) {
                    allPinsArr = near.filter(function(item) {
                        return item.offer.type == typeValue;
                    });
                    secondRender(allPinsArr);

                }
                else if(typeValue == 'any'){
                    allElRender(near);
                }
            }
        }
        else if( selectId === 'housing-price') {
            var priceValue = document.getElementById('housing-price').value; 
            var priceOptions = document.getElementsByClassName('map__filter')[1].getElementsByTagName('option');
            for(var i=0; i<priceOptions.length; i++){
                if(priceValue == 'low') {
                    allPinsArr = near.filter(function(item) {
                        return item.offer.price < 10000;
                    });
                    secondRender(allPinsArr);
                }
                else if(priceValue == 'middle'){
                    var allPinsArr = near.filter(function(item) {
                        return item.offer.price >= 10000 && item.offer.price <= 50000;
                    });
                    secondRender(allPinsArr);
                }
                else if(priceValue == 'high'){
                    var allPinsArr = near.filter(function(item) {
                        return item.offer.price > 50000;
                    });
                    secondRender(allPinsArr);
                }
                else if(priceValue == 'any'){
                    allElRender(near);
                }
            }
        }
        else if( selectId === 'housing-rooms') {
            var roomsValue = document.getElementById('housing-rooms').value; 
            var roomsOptions = document.getElementsByClassName('map__filter')[2].getElementsByTagName('option');
            for(var i=0; i<roomsOptions.length; i++){
                if(roomsValue == '1') {
                    allPinsArr = near.filter(function(item) {
                        return item.offer.rooms == roomsValue;
                    });
                    secondRender(allPinsArr);
                }
                else if(roomsValue == '2'){
                    var allPinsArr = near.filter(function(item) {
                        return item.offer.rooms == roomsValue;
                    });
                    secondRender(allPinsArr);
                }
                else if(roomsValue == '3'){
                    var allPinsArr = near.filter(function(item) {
                        return item.offer.price == roomsValue;
                    });
                    secondRender(allPinsArr);
                }
                else if(roomsValue == 'any'){
                    allElRender(near);
                }
            }
        }
        else if( selectId === 'housing-guests') {
            var guestsValue = document.getElementById('housing-guests').value; 
            var guestsOptions = document.getElementsByClassName('map__filter')[3].getElementsByTagName('option');
            for(var i=0; i<guestsOptions.length; i++){
                if(guestsValue == '1') {
                    allPinsArr = near.filter(function(item) {
                        return item.offer.guests == guestsValue;
                    });
                    secondRender(allPinsArr);
                }
                else if(guestsValue == '2'){
                    var allPinsArr = near.filter(function(item) {
                        return item.offer.guests == guestsValue;
                    });
                    secondRender(allPinsArr);
                }
                else if(guestsValue == 'any'){
                    allElRender(near);
                }
            }
        }
    });
}

Это не весь код, а только фильтр. Если нужна информация, скажите мне, пожалуйста. Спасибо за любую помощь.

Answer 1

Я вижу, что вы проверяете каждый выбранный вход, если он изменился. Вы можете попробовать сделать функции для каждого выбора. Вместо этого: if( selectId === 'housing-type'){...} вы можете отфильтровать все контакты, которые будут выглядеть следующим образом:

selects[i].addEventListener('change', function() {
    allPinsArr=[...near];//or near.clone()

    //functions to filter pins
    filterFunction1(allPinsArr);
    filterFunction2(allPinsArr);
    filterFunction3(allPinsArr);
    filterFunction4(allPinsArr);
}

Если выбран вход, он должен фильтроваться. В противном случае не сокращайте элементы.

Этот код - моя концепция, основанная на опыте. Этот код не будет работать. Это просто, чтобы показать, что вы можете сделать. Надеюсь, это поможет

Answer 2

var secondRender = function(arr) {
    mapPins.innerHTML = '';
    articleList.innerHTML = '';
    render(arr);
};

var selects = document.querySelectorAll('.map__filter');

var filterData = function() {
  const housingType = document.getElementById('housing-type').value;
  const priceType = document.getElementById('housing-price').value;
  const roomsType = document.getElementById('housing-rooms').value;
  const guestsType = document.getElementById('housing-guests').value;

  return window.near.filter(function(item) {
    var housingTypeIsOk = true;
    var priceTypeIsOk = true;
    var roomsTypeIsOk = true;
    var guestsTypeIsOk = true;

    if (housingType != 'any' && item.offer.type != housingType){
      housingTypeIsOk = false;
    }

    if (priceType != 'any'){
      if (priceType == 'low' && item.offer.price >= 10000) {
        priceTypeIsOk =  false;
      } else if(priceType == 'middle' && (item.offer.price < 10000 || item.offer.price > 50000)){
        priceTypeIsOk = false;
      } else if(priceType == 'high' && item.offer.price <= 50000){
        priceTypeIsOk = false;
      }
    }

    if(roomsType != 'any' && item.offer.rooms != roomsType) {
      roomsTypeIsOk = false;
    } 

    if(guestsType != 'any' && item.offer.rooms != guestsType) {
      guestsTypeIsOk = false;
    }

    return housingTypeIsOk && priceTypeIsOk && roomsTypeIsOk && guestsTypeIsOk;
  });
}

for(var i = 0; i < selects.length; i++) {
  selects[i].onchange = function(e) {
    const filteredData = filterData()
    secondRender(filteredData);
  }
}

Итак, после пары неудачных попыток решить эту задачу, я прошу моего друга помочь мне. И он сделал это. Идея заключалась в том, что нам нужно проверить все выборы, если один из них был изменен. Надеюсь, это кому-нибудь поможет. Продолжайте двигаться, ребята!

Answer 3

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