时间戳

首页 > 解决方案 > Problem when I want to filter on 3 conditions

javascript - Problem when I want to filter on 3 conditions

问题描述

I have a question about filtering multiple conditions. I have a fully working code where I filter on two conditions with the filter function but when I want to add the third one is where it gets really difficult.

In the code snippet you can see the working code for two filter options. I only have to find a way to filter the days but that is really difficult.

Can someone help me with this issue, I'm really curious to see what a solution could be :)

{
  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>

标签： javascriptecmascript-6filtering

解决方案

You're overcomplicating it. Don't write multiple kinds of conditions, and select them on which other criteria are not selected. This indeed becomes unmanageable for many filtering criteria.

You can do either

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;
}

or

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

推荐阅读