Лучший способ фильтровать результаты на основе диапазона значений ползунка диапазона? - PullRequest
Новая
       27

Лучший способ фильтровать результаты на основе диапазона значений ползунка диапазона?

0 голосов
/ 01 августа 2020

У меня есть ползунок диапазона, который фильтрует JavaScript объектов на основе их output ключа:

<input id="outputSlider" class="form-control" type="range" min="4" max="10">

Вот небольшой пример объекта: (их 50 их) 

const stratPickups = {
    "Model 1": {
      name: "Model 1",
      design: "single-coil",
      output: 4,
      tone: 3,
      
    },
    "Model 2": {
      name: "Model 2",
      design: "single-coil",
      output: 5,
      tone: 5,
      
    },
    "Model 3": {
      name: "Model 3",
      design: "single-coil",
      output: 6,
      tone: 6,
    },
}

На входе ползунка он вызывает эту функцию здесь: 

const outputSliderFunction = () => {
    const slider = document.querySelector("#outputSlider");
    let sliderValue = Number(slider.value);

    activeFilters.output = sliderValue; //Pushes the slider value into an object called activeFilters

    const filteredData = performFilter(data, activeFilters);

    refreshView(filteredData); //Displays the "cards" with the product information
  };

Сейчас это работает, но я хочу его улучшить. Как это работает сейчас, если sliderValue совпадает с output, карточка отображается на странице. Однако есть большие фрагменты диапазона ползунка, которые не показывают никаких результатов. Я хочу изменить функцию, чтобы принимать ряд входных данных, но я не знал, как это сделать, и ищу идеи.

Я думал, что могу изменить объекты, чтобы они имели min-output и max-output и выяснить, как показать результаты, когда значение ползунка находится между ними, но я не уверен, как я могу это сделать.

Есть идеи?

Вот функция performFilter: 

  const performFilter = (data, activeFilters) => {
    let result = data;
    Object.keys(activeFilters).forEach((key) => {
      result = result.filter((d) => d[key] === activeFilters[key]);
    });
    return result;
  };
...