How to populate a javascript array of objects from HTML select option

Question

I am having difficulty figuring out how to populate an array with different values from HTML select options.

In the HTML I have a select dropdown:

<select id="Playlist">
    <option value="trance">TRANCE</option>
    <option value="house">HOUSE</option>
</select>

And I would like to populate a "songs" array of objects with different values depending on which option is selected.

for "HOUSE", the songs would be

let songs = [
    {
      musicFile: "./music/mp3/Lasgo - Something .mp3",
      thumbnail: "./music/art/Lasgo - Something .jpg",
      contributor: " ",
      artist: "Lasgo",
      title: "Something",
      subtitle: " ",
      comment: "featuring Jelle van Dael"
    },
    {
      musicFile: "./music/mp3/Mason - You Are Not Alone .mp3",
      thumbnail: "./music/art/Mason - You Are Not Alone .jpg",
      contributor: " ",
      artist: "Mason",
      title: "You Are Not Alone",
      subtitle: " ",
      comment: "featuring Róisín Murphy"
}]

or if "TRANCE" is the selected option, the same array world have different values

let songs = [
    {
      musicFile: "./music/mp3/Aalto - Rush (Super8 vs Orkidea Remix) .mp3",
      thumbnail: "./music/art/Aalto - Rush (Super8 vs Orkidea Remix) .jpg",
      contributor: " ",
      artist: "Aalto",
      title: "Rush",
      subtitle: "(Super8 vs Orkidea Remix)",
      comment: " "
    },
    {
      musicFile: "./music/mp3/Above & Beyond - 1001 .mp3",
      thumbnail: "./music/art/Above & Beyond - 1001 .jpg",
      contributor: " ",
      artist: "Above & Beyond",
      title: "1001",
      subtitle: " ",
      comment: " "
}]

I've tried several techniques from google searching, but I can't seem to get it working.

Answer 1

You can listen to changes on select option and then use a callback function (or use onchange event ) which filters your songs based on the selected option.

You can use array.filter() method on arrays to filter a the songs

See example =>

HTML

<select id="Playlist">
  <option value="TRANCE">TRANCE</option>
  <option value="HOUSE">HOUSE</option>
</select>

JS

  let songs = [{
    musicFile: "./music/mp3/Lasgo - Something .mp3",
    thumbnail: "./music/art/Lasgo - Something .jpg",
    contributor: " ",
    artist: "Lasgo",
    title: "Something",
    subtitle: " ",
    comment: "featuring Jelle van Dael",
    playlist: "HOUSE"
  },
    {
      musicFile: "./music/mp3/Mason - You Are Not Alone .mp3",
      thumbnail: "./music/art/Mason - You Are Not Alone .jpg",
      contributor: " ",
      artist: "Mason",
      title: "You Are Not Alone",
      subtitle: " ",
      comment: "featuring Róisín Murphy",
      playlist: "HOUSE"
    }, {
      musicFile: "./music/mp3/Aalto - Rush (Super8 vs Orkidea Remix) .mp3",
      thumbnail: "./music/art/Aalto - Rush (Super8 vs Orkidea Remix) .jpg",
      contributor: " ",
      artist: "Aalto",
      title: "Rush",
      subtitle: "(Super8 vs Orkidea Remix)",
      comment: " ",
      playlist: "TRANCE"
    },
    {
      musicFile: "./music/mp3/Above & Beyond - 1001 .mp3",
      thumbnail: "./music/art/Above & Beyond - 1001 .jpg",
      contributor: " ",
      artist: "Above & Beyond",
      title: "1001",
      subtitle: " ",
      comment: " ",
      playlist: "TRANCE"
    }]

  const select_option = document.querySelector("#Playlist");

  select_option.onchange = ()=> {
    const value = select_option.value;
    let filtered_songs;
    switch (value) {
      case "HOUSE":
        filtered_songs = songs.filter(song => song.playlist === value)
        break;

      case "TRANCE":
        filtered_songs = songs.filter(song => song.playlist === value)
        break;

      default:
        // add some code
      }
      console.log(filtered_songs)
    }

Answer 2

You could do something like this:

 const allSongs = { house: [{ musicFile: "./music/mp3/Lasgo - Something .mp3", thumbnail: "./music/art/Lasgo - Something .jpg", contributor: " ", artist: "Lasgo", title: "Something", subtitle: " ", comment: "featuring Jelle van Dael" }, { musicFile: "./music/mp3/Mason - You Are Not Alone .mp3", thumbnail: "./music/art/Mason - You Are Not Alone .jpg", contributor: " ", artist: "Mason", title: "You Are Not Alone", subtitle: " ", comment: "featuring Róisín Murphy" } ], trance: [{ musicFile: "./music/mp3/Aalto - Rush (Super8 vs Orkidea Remix) .mp3", thumbnail: "./music/art/Aalto - Rush (Super8 vs Orkidea Remix) .jpg", contributor: " ", artist: "Aalto", title: "Rush", subtitle: "(Super8 vs Orkidea Remix)", comment: " " }, { musicFile: "./music/mp3/Above & Beyond - 1001 .mp3", thumbnail: "./music/art/Above & Beyond - 1001 .jpg", contributor: " ", artist: "Above & Beyond", title: "1001", subtitle: " ", comment: " " } ] } let songs = [] document.querySelector('#Playlist').addEventListener('change', (event) => { const selected = event.target.value songs = allSongs[selected] })

 <select id="Playlist"> <option value="">Select genre</option> <option value="trance">Trance</option> <option value="house">House</option> </select>

Answer 3

I hope this could help:

 let playList = {"house": [ { musicFile: "./music/mp3/Lasgo - Something .mp3", thumbnail: "./music/art/Lasgo - Something .jpg", contributor: " ", artist: "Lasgo", title: "Something", subtitle: " ", comment: "featuring Jelle van Dael" }, { musicFile: "./music/mp3/Mason - You Are Not Alone .mp3", thumbnail: "./music/art/Mason - You Are Not Alone .jpg", contributor: " ", artist: "Mason", title: "You Are Not Alone", subtitle: " ", comment: "featuring Róisín Murphy" }], "trance": [ { musicFile: "./music/mp3/Aalto - Rush (Super8 vs Orkidea Remix) .mp3", thumbnail: "./music/art/Aalto - Rush (Super8 vs Orkidea Remix) .jpg", contributor: " ", artist: "Aalto", title: "Rush", subtitle: "(Super8 vs Orkidea Remix)", comment: " " }, { musicFile: "./music/mp3/Above & Beyond - 1001 .mp3", thumbnail: "./music/art/Above & Beyond - 1001 .jpg", contributor: " ", artist: "Above & Beyond", title: "1001", subtitle: " ", comment: " " }] }; let songs = []; const playlistEl = document.querySelector("#Playlist"); songs = playList[playlistEl.value]; playlistEl.onchange = function(el) { songs = playList[this.value]; console.log(songs); }; console.log(songs);

 <select id="Playlist"> <option value="trance">TRANCE</option> <option value="house">HOUSE</option> </select>

Answer 4

It seems that you want to have a filtered array of songs based on the option selected. For that you need to set some sort of an identifier which filters the array. so for example:

let filteredSongs = []; // to be used later
let songs = [
 {
  type: "trance",
  title: "ab12",
  // rest of the properties
 },
 {
  type: "trance",
  title: "yz55",
  // rest of the properties
 },
 {
  type: "house",
  title: "ab12",
  // rest of the properties
 },
//... more such objects
]

and for onchange event of your select, you can simply filter the array like this:

function handleTypeChange(event){
 filteredSongs = songs.filter(s=> s.type === event.target.value);
}

So each time the option is changed you'll have filteredSongs reset with desired results. Hope you get the idea.