Реализуйте интерфейс фильтрации авиабилетов по количеству остановок: получите билеты через fetchTickets, динамически отрисуйте чекбоксы для доступного количества остановок, поддержите выбор нескольких значений и отфильтруйте список билетов. Обсудите возможные оптимизации.

Получите список, вычислите уникальные значения stops и храните выбранные значения в Set; фильтрация проверяет принадлежность этому набору.

Предположим, fetchTickets возвращает массив объектов с числовым stops; пустой выбор означает показ всех билетов. filters и list — существующие DOM-контейнеры.

async function mountTickets(filters, list, fetchTickets) {
  try {
    const tickets = await fetchTickets();
    const selected = new Set();
    const render = () => {
      list.replaceChildren(...tickets
        .filter(t => selected.size === 0 || selected.has(t.stops))
        .map(t => {
          const li = document.createElement('li');
          li.textContent = `${t.stops} пересадок`;
          return li;
        }));
    };
    filters.replaceChildren();
    for (const stops of [...new Set(tickets.map(t => t.stops))].sort((a, b) => a - b)) {
      const label = document.createElement('label');
      const input = document.createElement('input');
      input.type = 'checkbox';
      input.addEventListener('change', () => {
        if (input.checked) selected.add(stops); else selected.delete(stops);
        render();
      });
      label.append(input, document.createTextNode(` ${stops} пересадок`));
      filters.append(label);
    }
    render();
  } catch {
    list.textContent = 'Не удалось загрузить билеты';
  }
}

Для большого списка применяют виртуализацию или серверную фильтрацию; отдельно добавляют loading и отмену запроса при уходе со страницы.