Как заполнить массив JavaScript объектами на основе выбранного значения в HTML select

Оффтоп javascript
1

Помогите с заполнением массива данными из выпадающего списка

У меня есть выпадающий список с жанрами музыки:

<select id="genreSelector">
    <option value="rock">РОК</option>
    <option value="pop">ПОП</option>
</select>

Мне нужно создавать массив tracks с разными объектами в зависимости от выбранного жанра.

Для жанра “ПОП” массив должен содержать:

let tracks = [
    {
      audioFile: "./audio/files/Dua Lipa - Levitating.mp3",
      coverImage: "./images/covers/dua-lipa-levitating.jpg",
      uploader: "user123",
      performer: "Dua Lipa",
      songName: "Levitating",
      version: "Radio Edit",
      description: "featuring DaBaby"
    },
    {
      audioFile: "./audio/files/The Weeknd - Blinding Lights.mp3",
      coverImage: "./images/covers/weeknd-blinding.jpg",
      uploader: "musicfan",
      performer: "The Weeknd",
      songName: "Blinding Lights",
      version: "Original",
      description: "Chart topper 2020"
    }
]

А для “РОК” совсем другие треки:

let tracks = [
    {
      audioFile: "./audio/files/Queen - Bohemian Rhapsody.mp3",
      coverImage: "./images/covers/queen-bohemian.jpg",
      uploader: "rockstar",
      performer: "Queen",
      songName: "Bohemian Rhapsody",
      version: "Remastered",
      description: "Classic masterpiece"
    }
]

Пробовал разные способы но ничего не получается. Как это правильно реализовать?

2

у меня было то же самое недавно! сделал через Map - работает отлично. создаёшь const tracksByGenre = new Map(), потом добавляешь tracksByGenre.set('pop', твой_поп_массив) и tracksByGenre.set('rock', твой_рок_массив). когда нужны треки - просто tracks = tracksByGenre.get(document.getElementById('genreSelector').value). только не забудь проверить что ключ существует, иначе словишь undefined

3

Почему бы не создать объект с готовыми массивами для каждого жанра? Например, const genreData = { rock: [...], pop: [...] }, а потом просто взять нужный с genreSelector.value. Интересно, откуда вы берете данные? Это статично или с сервера?

4

Я бы через switch или обычный if-else сделал при смене селекта. Вешаешь обработчик на change и переписываешь tracks в зависимости от выбора. Типа document.getElementById('genreSelector').addEventListener('change', function() { if(this.value === 'pop') tracks = popTracks; else tracks = rockTracks; }). Только все варианты треков заранее в отдельные переменные объяви.