Проблема, когда я хочу фильтровать по 3 условиям - PullRequest
Новая
       8

Проблема, когда я хочу фильтровать по 3 условиям

0 голосов
/ 22 января 2019

У меня есть вопрос о фильтрации нескольких условий.У меня есть полностью рабочий код, где я фильтрую по двум условиям с помощью функции фильтра, но когда я хочу добавить третье, это становится действительно трудным.

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

Может кто-нибудь помочь мне с этим вопросом, мне действительно интересно посмотреть, каким может быть решение:) 

{
  const acts = [
    {
      id: 1,
      name: "Men in coats",
      locatie: 1,
      day: 24,
      soort: "straatact"
    },
    {
      id: 2,
      name: "Men in coats2",
      locatie: 4,
      day: 24,
      soort: "voorstelling"
    },
    {
      id: 3,
      name: "Men in coats3",
      locatie: 4,
      day: 24,
      soort: "voorstelling"
    },
    {
      id: 4,
      name: "Men in coats4",
      locatie: 2,
      day: 24,
      soort: "straatact"
    },
    {
      id: 5,
      name: "Men in coats5",
      locatie: 5,
      day: 24,
      soort: "straatact"
    }
  ];

  let currentDay = `alle`;

  const init = () => {
    const $location = document.querySelector(`.locatie`);
    $location.addEventListener(`input`, handleInputLocation);

    const $soort = document.querySelector(`.soort`);
    $soort.addEventListener(`input`, handleInputSoort);

    const $days = document.querySelectorAll(`.option_day`);
    const daysArray = Array.from($days);
    daysArray.forEach(day => {
      day.addEventListener(`click`, handleClickDay);
    });
  };

  const handleClickDay = e => {
    const currentTarget = e.currentTarget;
    const currentValue = currentTarget.dataset.name;

    const $soort = document.querySelector(`.soort`);
    let soort = $soort.value;

    const $locatie = document.querySelector(`.locatie`);
    const locatie = $locatie.value;

    currentDay = currentValue;

    filterData(locatie, soort, currentValue);
  };

  const handleInputLocation = e => {
    const currentTarget = e.currentTarget;
    const currentValue = currentTarget.value;

    const $soort = document.querySelector(`.soort`);
    let soort = $soort.value;

    const dag = currentDay;

    filterData(currentValue, soort, dag);
  };

  const handleInputSoort = e => {
    const currentTarget = e.currentTarget;
    const currentValue = currentTarget.value;

    const $locatie = document.querySelector(`.locatie`);
    const locatie = $locatie.value;

    const dag = currentDay;

    filterData(locatie, currentValue, dag);
  };

  const filterData = (locatie, soort, dag) => {
let filteredActs = acts;

if (locatie !== "alle") {
  locatie = parseInt(locatie);
  filteredActs = filteredActs.filter(act => act.locatie === locatie);
}
if (soort !== "alle") {
  filteredActs = filteredActs.filter(act => act.soort === soort);
}
if (dag !== "alle") {
  filteredActs = filteredActs.filter(act => act.dag === parseInt(dag));
  console.log(parseInt(dag));
}
// …

console.log(filteredActs);
return filteredActs;
  };

  init();
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
    <select class="select locatie">
      <option selected disabled value="alle">Location</option>
      <option value="alle">All</option>
      <option value="1">Location 1</option>
      <option value="2">Location 2</option>
      <option value="3">Location 3</option>
      <option value="4">Location 4</option>
      <option value="5">Location 5</option>
      <option value="6">Location 6</option>
    </select>
    <select class="select soort">
      <option selected disabled value="alle">Kind</option>
      <option value="alle">All</option>
      <option value="straatact">Straatacts</option>
      <option value="voorstelling">Voorstellingen</option>
    </select>
    <ul class="list_days">
      <li class="option_day" data-name="alle">All</li>
      <li class="option_day" data-name="24">Fr</li>
      <li class="option_day" data-name="25">Sa</li>
      <li class="option_day" data-name="26">Su</li>
    </ul>
    <script src="js/script.js"></script>
  </body>
</html>

1 Ответ

0 голосов
/ 22 января 2019

Ты слишком усложняешь это. Не пишите несколько видов условий, а выбирайте их, для которых другие критерии не выбраны. Это действительно становится неуправляемым для многих критериев фильтрации.

Вы можете сделать либо 

function filterData = (…) => {
  let filteredActs = acts;
  if (locatie !== "alle") {
    locatie = parseInt(locatie);
    filteredActs = filteredActs .filter(act => act.locatie === locatie);
  }
  if (soort !== "alle") {
    filteredActs = filteredActs.filter(act => act.soort === soort);
  }
  // …
  return filteredActs;
}

или 

function filterData = (…) => {
  return acts.filter(act =>
    (locatie === "alle" || act.locatie === parseInt(locatie)) &&
    (soort === "alle" || act.soort === soort)
    // && …
  );
}
...