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

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

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


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

Я написал такое решение, но оно кажется мне громоздким, и если в массиве будет несколько сотен объектов, то браузеру будет очень грустно. Каким может быть более оптимальное решение?
  • Вопрос задан
  • 103 просмотра
Решения вопроса 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);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы