Question 240564 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Multiple values for one key as an array

I am currently working on a project were I would like to assign specific song to a singer. The problem is that currently a singer can only be assigned one song. How can I check if the singer had already sung, and save the multiple songs into an array, and assign that array to the singer as a key/value pair?

const form = document.querySelector('form');
const songSpecialSinger = document.querySelector('#song-special-singer');
const songSpecialSong = document.querySelector('#song-special-song');
const songSingerList = {};
form.addEventListener('click', (e) => {
  const target = e.target;
  if (target.nodeName === 'BUTTON' && target.type === 'button' && (songSpecialSong.value != '')) {

    if (songSingerList.hasOwnProperty(songSpecialSinger.value)) {
      console.log('Singer already sang');
      console.log(songSingerList[songSpecialSinger.value]);
    }
    songSingerList[songSpecialSinger.value] = songSpecialSong.value;
    console.log(songSingerList);
    songSpecialSong.value = ''
  }
})
<form>
  <div>
    <label>Song Special:</label>
    <select name="Song-special" id="song-special-singer"></select>
    <input type="text" placeholder="Song" id="song-special-song">
    <button class="add-song" type="button">add song</button>
  </div>

  <div class="button-container">
    <button type="submit">generate post</button>
  </div>

</form>
Tags:

2

Answers


  1. 0

    Create an array for each singer to store their songs.
    Check if the singer already exists in the songSingerList object. If they do, you’ll add the new song to their existing array. If not, you’ll create a new array for that singer and add the song to it.
    When submitting the form, you can iterate through the songSingerList object to generate the desired output.

    const form = document.querySelector('form');
const songSpecialSinger = document.querySelector('#song-special-singer');
const songSpecialSong = document.querySelector('#song-special-song');
const songSingerList = {};

form.addEventListener('click', (e) => {
  const target = e.target;
  if (target.nodeName === 'BUTTON' && target.type === 'button' && songSpecialSong.value !== '') {
    const singer = songSpecialSinger.value;
    const song = songSpecialSong.value;

    if (songSingerList.hasOwnProperty(singer)) {
      // Singer already exists in the list, add the song to their array
      songSingerList[singer].push(song);
      console.log(`Added "${song}" to ${singer}'s songs`);
    } else {
      // Singer doesn't exist, create a new array for them
      songSingerList[singer] = [song];
      console.log(`Created new list for ${singer} with "${song}"`);
    }

    console.log(songSingerList);
    songSpecialSong.value = '';
  }
});

form.addEventListener('submit', (e) => {
  e.preventDefault();

  // Iterate through the songSingerList to generate the desired output
  for (const singer in songSingerList) {
    const songs = songSingerList[singer].join(', ');
    console.log(`${singer}: ${songs}`);
  }
});
    Login or Signup to reply.
  2. 0

    Here is a version that adds an array to each singer and renders the object

    const form = document.querySelector('form');
const output = document.getElementById('output')
const songSpecialSinger = document.getElementById('song-special-singer');
const songSpecialSong = document.getElementById('song-special-song');
const songSingerList = {};
document.getElementById('add-song').addEventListener('click', () => {
  const singer = songSpecialSinger.value;
  if (!singer) return;
  const song = songSpecialSong.value.trim();
  if (!song) return;
  if (songSingerList[singer]?.includes(song)) {
    console.log('Singer already sang');
    return;
  }
  songSingerList[singer] ??= []; // create array if it does not exist
  songSingerList[singer].push(song)
  songSpecialSong.value = '';
  songSpecialSong.placeholder = `Added song ${song} by ${singer}`;
});  
form.addEventListener('submit', (e) => {
  e.preventDefault();
  output.textContent = JSON.stringify(songSingerList);
});
    <form>
  <div>
    <label>Song Special:</label>
    <select name="Song-special" id="song-special-singer">
      <option value="">Please select</option>
      <option value="Edith Piaf">Edith Piaf</option>
      <option value="Eminem">Eminem</option>
    </select>
    <input type="text" placeholder="Song" id="song-special-song" style="width:200px">
    <button id="add-song" type="button">add song</button>
  </div>

  <div class="button-container">
    <button type="submit">generate post</button>
  </div>
  
</form>
<div id="output"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search