Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты
Категории Все вопросы проекта Компьютеры, Интернет Темы для взрослых Авто, Мото Красота и Здоровье Товары и Услуги Бизнес, Финансы Наука, Техника, Языки Философия, Непознанное Города и Страны Образование Фотография, Видеосъемка Гороскопы, Магия, Гадания Общество, Политика, СМИ Юридическая консультация Досуг, Развлечения Путешествия, Туризм Юмор Еда, Кулинария Работа, Карьера О проектах Mail.ru Животные, Растения Семья, Дом, Дети Другое Знакомства, Любовь, Отношения Спорт Золотой фонд Искусство и Культура Стиль, Мода, Звезды Полный список Спросить Лидеры
Поиск по вопросам

Как лучше делать сортировку товаров в React-приложении?

Союз Здравых Сил Знаток (497), открыт 1 неделю назад
Есть список из 30+ объектов, записанных в JSON-формате. Проект тестовый, поэтому использую JSON-server, объекты выглядят так:
 { 
    "cards": [ 
        { 
            "img": "./img/img-1.png", 
            "title": "THE IX", 
            "info": "Lorem ipsum dolor sit amet, consectetur adipiscing elit", 
            "price": 15000, 
            "made": "Germany",
            "id": 1 
        },  
        { 
            "img": "./img/img-2.png", 
            "title": "THE I7", 
            "info": "Lorem ipsum dolor sit amet, consectetur adipiscing elit", 
            "price": 19000, 
            "made": "USA",
            "id": 2 
        }
    ]
}
Нужно сделать сортировку товаров по price/made, как лучше её сделать - через бек(json-server) или через front(сортировать уже на месте)? Если через бек - то нужно просто делать запрос "htp://localhost:3000/cards?_sort=price&_order=desc" - и такой запрос будет сортировать все объекты по price, по убыванию
Выглядит довольно просто, но я прочитал что маленькие объёмы данных лучше сортировать на фронте, это так?
3 ответа
Максим Искусственный Интеллект (201028) 1 неделю назад
Оба варианта возможны, всё зависит от ситуации. Маленькие объемы можно сортировать где угодно, но нагрузка на сервер самую малость вырастет. Если ты удалённую функцию используешь многократно и сортировать тебе нужно по разным полям, можно передавать поле для сортировки. Если это всегда одно и то же поле по-умолчанию, тогда можно сортировать без каких-либо параметров. Можно и на фронтенде сортировать обычным методом sort для массивов.
Союз Здравых СилЗнаток (497) 1 неделю назад
Мне вот интересно, как тут можно через фронт(методом sort()) отсортировать все элементы, например по тому же price. Вот пример кода:
*allCards - это данные(товары), полученные по запросу и записанные в state

пока не знаю как тут на фронте это отсортировать
Максим Искусственный Интеллект (201028) 
 cardsArray.sort((a,b) => { 
  if (a.price == b.price) return 0;
  if (a.price == null) return -1;
  if (b.price == null) return 1;
  return b.price - a.prive;
});
Как-то так.
Петр Алексеевич Оракул (81518) 1 неделю назад
В реальной жизни будет скорее всего сортировка на бэке, т.к. будет с пагинацией, такое на фронте не отсортируешь, не получив сразу все данные
Союз Здравых СилЗнаток (497) 1 неделю назад
Спасибо за ответ

А интересно, в реальной работе - как происходит работа с серверами/API? Я пока делаю приложения для портфолио, поэтому и API у меня моковые, json-server тот же

А в реальных проектах/компаниях с чем предстоит работать?
Петр Алексеевич Оракул (81518) Союз Здравых Сил, да по-разному, в основном такие же fetch запросы на реальный адрес сервера, json-server вполне себе как реальный выглядит. Ну где-то может будет работа с веб-сокетами, там чуть сложнее
Андрей Устинов Мастер (1131) 1 неделю назад
Через бек. Если есть возможность не писать логику на фронте, а оставить беку, то так и нужно делать. Фронт нужен исключительно для отрисовки и некоторого взаимодействия с интерфейсом.
Похожие вопросы