Рубрики
Без рубрики

Как добавить функциональность фильтрации в ваши приложения

Предположим, у вас есть приложение, где вы хотите отфильтровать данные на основе некоторых критериев, таких как размер, цвет, цена и так далее. В этой статье мы увидим, как вы можете это сделать. Так что давайте начнем. Начальные Setuplet говорят, что у нас есть следующий список продуктов: Const Products

Автор оригинала: Yogesh Chavan.

Предположим, у вас есть приложение, где вы хотите отфильтровать данные, основанные на некоторых критериях, таких как Размер , цвет , Цена , и так далее.

В этой статье мы увидим, как вы можете это сделать.

Так что давайте начнем.

Начальная настройка

Допустим, у нас есть следующий список продуктов:

const products = [
  { name: 'Macbook Air', price: '180000', ram: 16 },
  { name: 'Samsung Galaxy M21', price: '13999', ram: 4 },
  { name: 'Redmi Note 9', price: '11999', ram: 4 },
  { name: 'OnePlus 8T 5G', price: '45999', ram: 12 }
];

И для фильтрации у нас есть два выпадающих – один для сортировки по различным критериям, таким как Цена и Рам и другой выпадающий путь за порядок сортировки, как нисходящий или восходящая как показано ниже:


  

    Sort By:
    
  

  

    Sort Order:

Как отображать продукты на пользовательском интерфейсе

Давайте добавим DisplayProducts Функция, которая отобразит продукты на UI.

const container = document.querySelector(".products");

const displayProducts = (products) => {
  let result = "";

  products.forEach(({ name, price, ram }) => {
    result += `
     

      
Name:${name}

      
Price:${price}

      
Ram:${ram} GB

     

    `;
  });

  container.innerHTML = result;
};

displayProducts(products);

DisplayProducts Функция в приведенных выше кодах петли через Продукты массив с помощью массива foreach метод. Он генерирует HTML, который будет отображаться с помощью литерального синтаксиса шаблона ES6 и вставляет его внутри Продукты девочка

Как мы проходим массив объектов к DisplayProducts Функция, мы используем синтаксис разрезания ES6 для foreach Функция обратного вызова петли, чтобы получить Имя , Цена и Рам Отказ

Вот a Code Pen Demo Отказ

Ваш начальный экран будет выглядеть так:

Как добавить функциональность фильтрации

Теперь добавим функциональность фильтрации.

Обрабатывать событие Onchange о Сортировать по Выпадать, мы добавим обработчик событий для этого.

sortByDropdown.addEventListener('change', () => {
  // some code
};

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

const sortByDropdown = document.querySelector(".sort-by");
const sortOrderDropdown = document.querySelector(".sort-order");
const container = document.querySelector(".products");

Теперь давайте добавим логику сортировки:

sortByDropdown.addEventListener("change", () => {
  const sortByValue = sortByDropdown.value; // price or ram value
  const sortOrderValue = sortOrderDropdown.value; // asc or desc value

  const sorted =
    sortOrderValue === "desc"
      ? descendingSort(sortByValue)
      : ascendingSort(sortByValue);

  displayProducts(sorted);
});

Здесь мы проверяем значение второго раскрывающегося списка. Если это desc мы называем deachendingsort Функция (которую мы еще определим). В противном случае мы называем ascendingsort Функция, передавая первое раскрывающее значение, следует ли сортировать по Цена или Рам Отказ

Затем мы проходим этот результат к DisplayProducts Функция, поэтому она будет обновлять пользовательский интерфейс с этой сортировкой продуктов.

Как добавить функциональность сортировки

Теперь давайте добавим по убыванию сортировка в возрастает сортировка Функции.

const ascendingSort = (sortByValue) => {
  return products.sort((a, b) => {
    if (a[sortByValue] < b[sortByValue]) return -1;
    if (a[sortByValue] > b[sortByValue]) return 1;
    return 0;
  });
};

const descendingSort = (sortByValue) => {
  return products.sort((a, b) => {
    if (a[sortByValue] < b[sortByValue]) return 1;
    if (a[sortByValue] > b[sortByValue]) return -1;
    return 0;
  });
};

Здесь мы используем функцию компаратора для функции сортировки массива.

Как вы знаете, если у нас есть такой объект:

const product = { name: 'Macbook Air', price: '180000', ram: 16 };

Тогда мы можем получить доступ к своим свойствам двумя способами:

  1. Использование наименование товара
  2. Использование наименование товара']

Как у нас есть динамическое значение SortbyValue Переменная, мы используем 2-й путь внутри Сортировать Функция для получения значения продукта ( A [SortbyValue] или B [sortbyValue] ).

Как работает сортировка в порядке возрастания

  • Если первое значение сравнивается в алфавитном порядке перед вторым значением, возвращается отрицательное значение.
  • Если первое значение сравнивается в алфавитном порядке после второго значения, возвращается положительное значение.
  • Если первые и второе значения равны, возвращается ноль, который автоматически сортирует массив в порядке возрастания.

Как работает сортировка по убыванию

  • Если первое значение сравнивается в алфавитном порядке перед вторым значением, возвращается положительное значение.
  • Если первое значение сравнивается в алфавитном порядке после второго значения, возвращается отрицательное значение.
  • Если первые и второе значения равны, возвращается ноль, который автоматически сортирует массив в порядке убывания.

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

sortOrderDropdown.addEventListener("change", () => {
  const event = new Event("change");
  const sortByValue = sortByDropdown.value;

  if (sortByValue) {
    sortByDropdown.dispatchEvent(event);
  }
});

Здесь мы добавили Если Состояние, потому что мы не хотим отсортировать продукты, когда раскрывающийся список не выбран.

Вот a Code Pen Demo Отказ

Проверьте демонстрацию ниже рабочей функции:

Как использовать Loadash, чтобы упростить код сортировки

Если вы не хотите писать свою собственную логику сортировки, вы можете использовать Ордербий Метод, предоставленный Лоташ который является очень популярной библиотекой утилиты.

Давайте добавим Ордербий Способ изменения сортировки по выпаду, как это:

sortByDropdown.addEventListener("change", () => {
  const sortByValue = sortByDropdown.value; // price or ram value
  const sortOrderValue = sortOrderDropdown.value; // asc or desc value

  const sorted = _.orderBy(products, [sortByValue], sortOrderValue);

  displayProducts(sorted);
});

и удалить оба возрастает сортировка в по убыванию сортировка Функции.

Для Ордербий метод, мы предоставили

  • массив в качестве первого параметра
  • Имущество от объекта на основе которого нам нужно сортировать ( цена или RAM ) как второй параметр
  • порядок сортировки ( asc или desc ) как третий параметр

Вот a Code Pen Demo Отказ

С этим Ордербий Способ Lodash, функциональность работает точно так же, как и раньше. Единственное, что нам не нужно писать логику сортировки.

Спасибо за прочтение!

Хотите узнать все функции ES6 + подробно, включая Пусть и Const , Обещания, различные методы обещания, массив и деструктурирование объектов, функции стрелки, Async/ждут, импорт и экспорт и многое другое?

Проверьте мой Овладение современным JavaScript книга. Эта книга охватывает все предварительные реквизиты для реагирования на обучение и помогает вам стать лучше на JavaScript и реагировать.

Кроме того, проверьте мой Бесплатно Введение в React Router Курс для изучения React Router с нуля.

Хотите остаться в курсе с регулярным контентом в отношении JavaScript, React, Node.js? Следуй за мной на LinkedIn .

Читайте ещё по теме: