Как отобразить на странице сортировку массива, полученного асинхронно?

Question

уважаемые форумчане. Получаю данные из Rest API с помощью fetch. Данные записываются в массив cards с помощью функции showProducts. Есть раскрывающийся список (селект - changeSort) с двумя параметрами - сортировка по id по возрастанию и по убыванию. При клике на них, данные должны сортироваться по возрастанию и убыванию. Но этого не происходит. Причём, в консоли данные сортируются. Но на странице сортировка не отображается. Пробовал делать сортировку без клика, а по умолчанию (просто вставлял в функцию getProducts функцию сортировки), тогда всё работает. А вот по клику не работает. Ни по кнопке, ни по селекту. Перечитал заново инфу про асинхронность, колбеки и промисы. Но всё равно не могу понять как это осуществить. Прошу помочь.

//Переменные
const cardsContaner = document.querySelector('.cards-contaner');
let start = document.querySelector('.start');
let cards = [];
const changeSort = document.getElementById('change-sort');

//Получение данных с сервера
const getProducts = async () => {
  const obj = await fetch('https://reqres.in/api/users?page=2');
  const result = await obj.json();
  showProducts(result.data);
  changeSort.onchange = function() {
      if (this.value === 'price-up') {
        cards.sort((prev, next) => prev.crId - next.crId);
      };
      if (this.value === 'price-down') {
        cards.sort((prev, next) => next.crId - prev.crId);
      };
    };
}
getProducts();

//Отображение товаров
function showProducts(items){
  items.forEach(item => {
    cards.push({crId: item.id, crEmail: item.email});
  });
  for(let c = 0; c <= cards.length - 1; c++) {
      cardsContaner.innerHTML += `
    <div class="container__card">
      <div class="card__title">${cards[c].crId}</div>
      <div class="card__price">${cards[c].crEmail}</div>
    </div>`;
    }

};

<main>
    <div class="sort-wrap">
      <p class="sort-wrap__title">Сортировать по</p>
      <select id="change-sort">
        <option class="price-up" value="price-up">id (по возрастанию)</option>
        <option class="price-down" value="price-down">id (по убыванию)</option>
      </select>
    </div>
    <div class="cards-contaner">

    </div>
  </main>

БЛОГ НА HUSL

Как отобразить на странице сортировку массива, полученного асинхронно?

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