JSFiddle - React, Tailwind, and code Playground

JavaScript

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

function getSubSport(item) {
  let sub_sport_arr = [];

  data.forEach(val => {
    if (val.sport === item && val.sub !== null) sub_sport_arr.push(val.sub)
  });

  let sorted_sub_sport_arr = sub_sport_arr.filter((item, index, arr) => arr.indexOf(item) == index);

  return sorted_sub_sport_arr.length > 0 ? sorted_sub_sport_arr : null;
}

function getSubList(sub_data) {
  if (sub_data !== null) {
    let sub_list = $('<ul>', { class: 'sub_list' });

    sub_data.forEach(item => {
      $('<li>', {
        text: item
      }).appendTo(sub_list);
    });
    
    return sub_list;
  }
  return false;
}

let sport_obj = {};
let sport_arr = data.map(item => item.sport);
let sorted_sport_arr = sport_arr.filter((item, index, arr) => arr.indexOf(item) === index);

sorted_sport_arr.forEach(item => {
  sport_obj[item] = getSubSport(item);
});

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

for (let key in sport_obj) {
  $('<li>', {
    append: $('<p>', {
      text: key
    }).add(getSubList(sport_obj[key]))
  }).appendTo('#list');
}