1

Помогите реализовать фильтрацию имеющегося списка.

Задача состоит в том, что после изменения соответствующего селекта или чек-бокса метод dispalyCars каждый раз должен отрисовывать в DOM необходимое количество элементов с классом cars-list__item.

var dataController = (function() {
  var cars = [{
      brand: 'Toyota',
      year: 2012,
      price: 600000,
      owners: 2,
      features: {
        transmission: 'auto',
        ac: true
      }
    },

    {
      brand: 'Audi',
      year: 2002,
      price: 350000,
      owners: 3,
      features: {
        transmission: 'manual',
        ac: false
      }
    },

    {
      brand: 'Ford',
      year: 2015,
      price: 500000,
      owners: 1,
      features: {
        transmission: 'auto',
        ac: true
      }
    },

    {
      brand: 'Volkswagen',
      year: 1992,
      price: 99999,
      owners: 6,
      features: {
        transmission: 'manual',
        ac: false
      }
    },

    {
      brand: 'Volkswagen',
      year: 2005,
      price: 450000,
      owners: 3,
      features: {
        transmission: 'manual',
        ac: true
      }
    },

    {
      brand: 'Toyota',
      year: 2017,
      price: 900000,
      owners: 1,
      features: {
        transmission: 'auto',
        ac: true
      }
    },

    {
      brand: 'BMW',
      year: 2010,
      price: 750000,
      owners: 3,
      features: {
        transmission: 'auto',
        ac: true
      }
    },

    {
      brand: 'Ford',
      year: 2012,
      price: 520000,
      owners: 3,
      features: {
        transmission: 'auto',
        ac: true
      }
    },

    {
      brand: 'Audi',
      year: 2000,
      price: 250000,
      owners: 5,
      features: {
        transmission: 'manual',
        ac: false
      }
    },

    {
      brand: 'Subaru',
      year: 2013,
      price: 750000,
      owners: 1,
      features: {
        transmission: 'auto',
        ac: true
      }
    },
  ];

  return {
    getData: function() {
      return cars;
    }
  }
})();

var UIcontroller = (function() {

  return {
    dispalyCars: function(carsList) {

      var carsBlock = document.querySelector('.cars-list');

      var fragment = document.createDocumentFragment();

      for (var i = 0; i < carsList.length; i++) {

        if (carsList[i].features.transmission === 'auto') {
          carsList[i].features.transmission = 'автомат';
        } else {
          carsList[i].features.transmission = 'механическая';
        };

        if (carsList[i].features.ac === true) {
          carsList[i].features.ac = 'да';
        } else {
          carsList[i].features.ac = 'нет';
        };

        var newCar = document.createElement('li');
        newCar.className = 'cars-list__item';
        newCar.textContent = 'Марка: ' + carsList[i].brand + ', Год выпуска: ' + carsList[i].year + ', Цена: ' + carsList[i].price + ' руб. ' + 'Собственников по ПТС: ' + carsList[i].owners + '. Дополнительно ' + '(' + 'коробка: ' + carsList[i].features.transmission + ', кондиционер: ' + carsList[i].features.ac + ')';

        fragment.appendChild(newCar);
      }
      carsBlock.appendChild(fragment);

    }
  }
})();

var controller = (function(dataCtrl, UICtrl) {

  // Получить массив с данными
  var carsList = dataCtrl.getData();

  // Отрисовать список авто
  UICtrl.dispalyCars(carsList);

})(dataController, UIcontroller);
.cars-list {
  padding: 0;
  margin: 0;
  min-height: 360px;
}

.cars-list__item {
  background-color: rgba(64, 161, 241, 0.753);
  box-sizing: border-box;
  width: 1000px;
  height: 30px;
  margin-top: 5px;
  margin-bottom: 5px;
  padding-top: 5px;
  padding-left: 5px;
  border-radius: 10px;
  list-style: none;
}

.filter {
  background-color: silver;
  width: 1000px;
  height: 30px;
  margin-top: 20px;
  padding-top: 5px;
  padding-left: 5px;
  border-radius: 10px;
}
<div class="main">
  <ul class="cars-list"></ul>
  <form action="#" class="filter" autocomplete="off">
    <select name="barnd" id="brand-type" class="filter__brand">
      <option value="any" selected>Любaя марка</option>
      <option value="toyota">Toyota</option>
      <option value="audi">Audi</option>
      <option value="ford">Ford</option>
      <option value="volkswagen">Volkswagen</option>
      <option value="bmw">BMW</option>
      <option value="subaru">Subaru</option>
    </select>

    <select name="year" id="cars-year" class="filter__year">
      <option value="any" selected>Любой год выпуска</option>
      <option value="1">до 2000 года</option>
      <option value="2">до 2010 года</option>
      <option value="3">после 2010 года</option>
    </select>

    <select name="price" id="cars-price" class="filter__price">
      <option value="any" selected>Любая цена</option>
      <option value="low">до 100000&#x20bd;</option>
      <option value="middle">100000 - 500000&#x20bd;</option>
      <option value="high">от 500000&#x20bd;</option>
    </select>

    <select name="owners" id="cars-owners" class="filter__owners">
      <option value="any" selected>Любое число собственников</option>
      <option value="1">Один</option>
      <option value="2">Два</option>
      <option value="3">Три и более</option>
    </select>

    <input type="checkbox" name="features" value="auto" id="transmisson">
    <label class="feature feature--auto" for="transmisson">Автоматическая коробка передач</label>

    <input type="checkbox" name="features" value="yes" id="conditioner">
    <label class="feature feature--conditioner" for="conditioner">Кондиционер</label>
  </form>
</div>

4
  • Не совсем понятно, почему посчитали вопрос дубликатом 24 июн 2018 в 11:29
  • Если нужно отфильтровать массив - можно воспользоваться функцией filter, - об этом как раз в дубликате и указано.
    – Grundy
    24 июн 2018 в 13:54
  • @Grundy там несколько ответов и часть одного из них вроде бы отвечает на этот вопрос. Это совсем неочевидно. Предлагаю здесь написать ответ конкретно про фильтрацию, а там дать ссылку сюда.
    – Nick Volynkin
    28 июн 2018 в 3:52
  • @NickVolynkin, как-то спорно.
    – Grundy
    28 июн 2018 в 6:09

2 ответа 2

1

Если нужно отфильтровать массив - можно воспользоваться функцией filter

var filtered = carsList.filter(car => condition1 && condition2 && ...)

Где вместо conditionN идет проверка нужных свойств в соответствии с выбранными элементами в селекте.

после фильтрации нужно просто передать полученный массив в функцию UICtrl.dispalyCars. Стоит заметить, что данная функция не очищает предварительно блок .cars-list, что может привести к дублированию элементов. Поэтому это нужно либо добавить в саму функцию, либо сделать перед ее вызовом.

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

3
  • Именно так и сделал, разобравшись сам, когда ветку посчитали дубликатом, но теперь возник вопрос в том, как сделать так, чтобы сделать фильтрацию по чек-боксам, если их будет, скажем, не два, а гораздо больше 28 июн 2018 в 6:55
  • @russian-stan, а в чем отличие? Принцип один и тот же.
    – Grundy
    28 июн 2018 в 6:56
  • Написал код выше как ответ на свой же вопрос, принцип такой же, но перечисление чек-боксов по индексам как-то не очень 28 июн 2018 в 7:03
0

В общем работает, но есть только необходимость сделать фильтрацию по чек-боксам более универсальной на тот случай, если их будет гораздо больше, чем 2

var dataController = (function() {
  var cars = [{
      brand: 'Toyota',
      year: 2012,
      price: 600000,
      owners: 2,
      features: {
        transmission: 'auto',
        ac: true
      }
    },

    {
      brand: 'Audi',
      year: 2002,
      price: 350000,
      owners: 3,
      features: {
        transmission: 'manual',
        ac: false
      }
    },

    {
      brand: 'Ford',
      year: 2015,
      price: 500000,
      owners: 1,
      features: {
        transmission: 'auto',
        ac: true
      }
    },

    {
      brand: 'Volkswagen',
      year: 1992,
      price: 99999,
      owners: 6,
      features: {
        transmission: 'manual',
        ac: false
      }
    },

    {
      brand: 'Volkswagen',
      year: 2005,
      price: 450000,
      owners: 3,
      features: {
        transmission: 'manual',
        ac: true
      }
    },

    {
      brand: 'Toyota',
      year: 2017,
      price: 900000,
      owners: 1,
      features: {
        transmission: 'auto',
        ac: true
      }
    },

    {
      brand: 'BMW',
      year: 2010,
      price: 750000,
      owners: 3,
      features: {
        transmission: 'auto',
        ac: true
      }
    },

    {
      brand: 'Ford',
      year: 2012,
      price: 520000,
      owners: 3,
      features: {
        transmission: 'auto',
        ac: true
      }
    },

    {
      brand: 'Audi',
      year: 2000,
      price: 250000,
      owners: 5,
      features: {
        transmission: 'manual',
        ac: false
      }
    },

    {
      brand: 'Subaru',
      year: 2013,
      price: 750000,
      owners: 1,
      features: {
        transmission: 'auto',
        ac: true
      }
    }
  ];
  console.log(cars);
  return {
    getData: function() {
      return cars;
    }
  }
})();

var UIcontroller = (function() {

  return {
    dispalyCars: function(carsList) {

      var carsBlock = document.querySelector('.cars-list');

      var fragment = document.createDocumentFragment();

        carsList.forEach(function(item){

        var newCar = document.createElement('li');
        newCar.className = 'cars-list__item';
        newCar.textContent = 'Марка: ' + item.brand + ', Год выпуска: ' + item.year + ', Цена: ' + item.price + ' руб. ' + 'Собственников по ПТС: ' + item.owners + '. Дополнительно ' + '(' + 'коробка: ' + item.features.transmission + ', кондиционер: ' + item.features.ac + ')';

        fragment.appendChild(newCar);
      });

      carsBlock.appendChild(fragment);

    },

    filterData: function(carsList) {

      var brand = document.querySelector('.filter__brand');
      var year = document.querySelector('.filter__year');
      var price = document.querySelector('.filter__price');
      var owners = document.querySelector('.filter__owners');
      var features = document.getElementsByName('features');

      var newList = carsList.filter(function(item) {

        switch (brand.value) {
          case 'toyota':
            return item.brand === 'Toyota';
            break;
          case 'audi':
            return item.brand === 'Audi';
            break;
          case 'ford':
            return item.brand === 'Ford';
            break;
          case 'volkswagen':
            return item.brand === 'Volkswagen';
            break;
          case 'bmw':
            return item.brand === 'BMW';
            break;
          case 'subaru':
            return item.brand === 'Subaru';
            break;
          case 'any':
            return item
        }
      }).

      filter(function(item) {

        switch (year.value) {
          case '1':
            return item.year <= 2000;
            break;
          case '2':
            return item.year <= 2010;
            break;
          case '3':
            return item.year >= 2010;
            break;
          case 'any':
            return item;
        }
      }).

      filter(function(item) {

        switch (price.value) {
          case 'low':
            return item.price <= 100000;
            break;
          case 'middle':
            return (item.price >= 100000 && item.price <= 500000);
            break;
          case 'high':
            return item.price >= 500000;
            break;
          case 'any':
            return item;
        }
      }).

      filter(function(item) {

        switch (owners.value) {
          case '1':
            return item.owners === 1;
            break;
          case '2':
            return item.owners === 2;
            break;
          case '3':
            return item.owners >= 3;
            break;
          case 'any':
            return item;
        }
      }).

      filter(function(item) {
        if (features[0].checked) {
          return item.features.transmission === 'auto';
        } else {
          return item;
        }
      }).

      filter(function(item) {
        if (features[1].checked) {
          return item.features.ac === true;
        } else {
          return item;
        }
      });


      console.log(newList);
      return newList
    },

    clearList: function() {
      var listItem = document.querySelectorAll('.cars-list__item');

      for (var i = 0; i < listItem.length; i++) {
        listItem[i].remove();
      }
    },
  }
})();

var controller = (function(dataCtrl, UICtrl) {

  // 1. Получить массив с исходными данными
  var carsList = dataCtrl.getData();

  // 2. Отрисовать исходный список авто
  UICtrl.dispalyCars(carsList);

  //Выполнить фильтрацию
  var filterForm = document.querySelector('.filter');

  var filterFormHandler = function() {
    // 1. Получить данные отфильтрованного массива
    var filteredList = UICtrl.filterData(carsList);

    // 2. Очистить старый список
    UIcontroller.clearList();

    // 3. Oтрисовать новый список
    UICtrl.dispalyCars(filteredList);
  }

  filterForm.addEventListener('change', filterFormHandler);

})(dataController, UIcontroller);
.cars-list {
  padding: 0;
  margin: 0;
  min-height: 360px;
}

.cars-list__item {
  background-color: rgba(64, 161, 241, 0.753);
  box-sizing: border-box;
  width: 1000px;
  height: 30px;
  margin-top: 5px;
  margin-bottom: 5px;
  padding-top: 5px;
  padding-left: 5px;
  border-radius: 10px;
  list-style: none;
}

.filter {
  background-color: silver;
  width: 1000px;
  height: 30px;
  margin-top: 20px;
  padding-top: 5px;
  padding-left: 5px;
  border-radius: 10px;
}
<div class="main">
  <ul class="cars-list"></ul>
  <form action="#" class="filter" autocomplete="off">
    <select name="barnd" id="brand-type" class="filter__brand">
      <option value="any" selected>Любaя марка</option>
      <option value="toyota">Toyota</option>
      <option value="audi">Audi</option>
      <option value="ford">Ford</option>
      <option value="volkswagen">Volkswagen</option>
      <option value="bmw">BMW</option>
      <option value="subaru">Subaru</option>
    </select>

    <select name="year" id="cars-year" class="filter__year">
      <option value="any" selected>Любой год выпуска</option>
      <option value="1">до 2000 года</option>
      <option value="2">до 2010 года</option>
      <option value="3">после 2010 года</option>
    </select>

    <select name="price" id="cars-price" class="filter__price">
      <option value="any" selected>Любая цена</option>
      <option value="low">до 100000&#x20bd;</option>
      <option value="middle">100000 - 500000&#x20bd;</option>
      <option value="high">от 500000&#x20bd;</option>
    </select>

    <select name="owners" id="cars-owners" class="filter__owners">
      <option value="any" selected>Любое число собственников</option>
      <option value="1">Один</option>
      <option value="2">Два</option>
      <option value="3">Три и более</option>
    </select>

    <input type="checkbox" name="features" value="auto" id="transmisson">
    <label class="feature feature--auto" for="transmisson">Автоматическая коробка передач</label>

    <input type="checkbox" name="features" value="yes" id="conditioner">
    <label class="feature feature--conditioner" for="conditioner">Кондиционер</label>
  </form>
</div>

2
  • не стоит делать return item из функции filter. Иногда это может давать неожиданные результаты. Лучше явно вернуть true или false.
    – Grundy
    28 июн 2018 в 7:08
  • Обрати внимание, что функции для features у тебя отличаются всего двумя параметрами - какое свойство проверять и значение с которым сравнивать. Оба этих параметра можно хранить например в data-атрибутах чекбоксов и в проверке брать непосредственно из элементов, это позволит использовать одну и ту же функцию, которую можно просто в цикле по элементам вызывать.
    – Grundy
    28 июн 2018 в 7:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.