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

Question

[Евгений Журов]

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

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

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

Я написал такое решение, но оно кажется мне громоздким, и если в массиве будет несколько сотен объектов, то браузеру будет очень грустно. Каким может быть более оптимальное решение?

Answer 1

[Stockholm Syndrome]

сначала бы привести к более удобной структуре

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);

Comments

[Алексей Юдов]

И кто это будет за вас интерпритировать в ES5? Запудрили человеку мозги... :D :D :D

[Евгений Журов]

TCloud, так Babel же

[Евгений Журов]

Работает, только sub не уникальны. "Плавание в бассейне" дважды попало в список. Но с этим я, думаю, разберусь) Спасибо!

[Алексей Юдов]

Евгений Журов, думал раз такая задача "встала", то и про Babel не слухом не духом :)

[Евгений Журов]

TCloud, так задачу я и сам сделал, если вы посмотрите на мой вариант по ссылке в вопросе, то обнаружите там ES6) Вопрос заключался именно в том, насколько мое решение хорошо с точки зрения производительности, и можно ли его улучшить.