Отсортировать массив объектов, для вывода на страницу карточек

Question

Есть массив с объектами про отели - нужно отобразить их, отсортировав по цене, отображаем только первые 3 карточки с минимальной ценой, а остальные показываем только если нажали на кнопку “Показать больше”, карточки на экран выводятся по возрастанию цены и также нужно сделать сортировку по нажатию на кнопки цене(по возрастанию) и цене(по убыванию). Функционал добавления реализовал, но добавляются карточки к уже созданному массиву, как сделать так, что бы карточки не добавлялись, а обновлялись в зависимости от условий сортировки? Ниже приложил ссылку на codepen

https://codepen.io/Andrey88/pen/OJXroqx

Исходный массив:

const hotels = [
  {
      title: "Albus Hotel Amsterdam City Centre",
      price: 115,
      photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/31881601.webp?k=25b6ebb4be040e97c397ac14ea706c37940679caed81ad3d8c4dddd1f10c71b2&o='
  },
  {
      title: 'Park Plaza Victoria Amsterdam',
      price: 150,
      photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/13334194.webp?k=194460badd8a74b28e1bf59aa917de049ed1c9e1ec252ad26aec1ba492b7f69e&o='
  },
  {
      title: 'Park Inn by Radisson Amsterdam City West',
      price: 95,
      photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/160590097.webp?k=4914b560022372de041f5e8ec2b257bdbbd318035848852193f0e64e04dd9402&o='
  },
  {
      title: 'NH City Centre Amsterdam',
      price: null,
      photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/260988043.webp?k=f080732cb7ec98a4724a49936da46f5c36fa00d31e78cc3c7cc6f51c9e50ed37&o='
  },
  {
      title: 'Mercure Amsterdam Sloterdijk Station',
      price: 54,
      photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/252169240.webp?k=09d57ae22ddc721dac84ccfbdf5433b8561e8995060b41128fb7271f79a075cc&o='
  },
  {
      title: 'Monet Garden Hotel Amsterdam',
      price: 102,
      photo: ''
  },
  {
      title: 'Radisson Blu Hotel, Amsterdam City Center',
      price: 154,
      photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/228897852.webp?k=7b11c21a67b4f8e847628b69e83b7245fe2698b704a2f8245f44a49de5eb814a&o='
  },
  {
      title: 'NH Collection Amsterdam Barbizon Palace',
      price: 172,
      photo: 'https://cf.bstatic.com/xdata/images/hotel/square600/256888798.webp?k=03b5832921f7a206abdc69df10bcb91992fb14b614917e452bd082a2a1abf47e&o='
  },
];

Answer 1

Например так: https://codepen.io/snilcy/pen/abZXoVN?editors=0010

const Sort = {
  UP: 'UP',
  DOWN: 'DOWN',
}

let sort = Sort.DOWN;
const STEP = 3;
let MAX = STEP;

const render = (sort, max) => {
  cardConteiner.innerHTML = ''
  addNewHotels(hotels.sort((a, b) => {
    switch (sort) {
      case Sort.UP: return a.price - b.price
      case Sort.DOWN: return b.price - a.price
      default: return 0;
    }
  }).slice(0, max))
}

render(Sort.DOWN, MAX)

sortItemTypeDown.addEventListener('click', () => render(sort = Sort.DOWN, MAX));
sortItemTypeUp.addEventListener('click', () => render(sort = Sort.UP, MAX));
containerOpen.addEventListener('click', () => render(sort, MAX += STEP))

БЛОГ НА HUSL

Отсортировать массив объектов, для вывода на страницу карточек

Ответы (1 шт):