CODEWITHSUNDEEP
javascripthtml
John Marie
John Marie

Reputation: 13

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

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&oacute;is&iacute;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.

Upvotes: 0

Views: 1199

Answers (4)

Sanmeet
Sanmeet

Reputation: 1410

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&oacute;is&iacute;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)
    }

Upvotes: 1

Arslan Shahab
Arslan Shahab

Reputation: 649

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.

Upvotes: 0

parkourkarthik
parkourkarthik

Reputation: 834

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&oacute;is&iacute;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>

Upvotes: 0

LSE
LSE

Reputation: 1358

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&oacute;is&iacute;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>

Upvotes: 0

Related Questions