Как наиболее производительно сделать такой список?

Добрый день. Есть массив объектов:

const data = [
  {
    sport: "Плавание",
    sub: "Плавание в открытой воде"       
  },
  {
    sport: "Бег",
    sub: "Трейл",
  },
  {
    sport: "Бег",
    sub: "Кросс"
  },
  {
    sport: "Триатлон",
    sub: null        
  },
  {
    sport: "Плавание",
    sub: "Плавание в бассейне"    
  },
  {
    sport: "Плавание",
    sub: "Плавание в бассейне"    
  }
];


Из него нужно вывести многоуровневый html-список с уникальными sport и уникальными sub, относящимися к конкретному sport.

Я написал такое решение, но оно кажется мне громоздким, и если в массиве будет несколько сотен объектов, то браузеру будет очень грустно. Каким может быть более оптимальное решение?
  • Вопрос задан
  • 96 просмотров
Решения вопроса 1
@StockholmSyndrome
сначала бы привести к более удобной структуре
spoiler
const groupedData = data.reduce((acc, {sport, sub}) => {
  const elem = acc.find((item) => item.sport === sport); 
  if (elem) {
    elem.subs.push(sub);
  } else {
    acc.push({
      sport, 
      subs: sub ? [sub] : []
    });
  }

  return acc;
}, []);

const $ul = $('<ul>', {
  id: 'list'
}).appendTo('body'); 

const elems = groupedData.map(({sport, subs}) => {
  return `
    <li>${sport}<ul>
        ${subs.map((sub) => `<li>${sub}</li>`).join('')}
      </ul>
    </li>
  `;
}).join('');

$ul.append(elems);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Александрия Москва
от 200 000 до 250 000 руб.
Foodtronics Москва
от 100 000 до 200 000 руб.
Zeus Capital Москва
от 70 000 до 130 000 руб.
22 авг. 2019, в 07:30
10000 руб./за проект
22 авг. 2019, в 02:23
60000 руб./за проект
22 авг. 2019, в 02:15
5000 руб./за проект