In Javascript, how do I create data- attributes inside options from an object?

Question

I have been working on a project for a while in my spare time. I am currently trying to store data for later use.

let weapons = [
{
  type: "Revolver",
  bMats: 60,
  cTime: 50,
},
{
  type: "Rifle",
  bMats: 100,
  cTime: 70,
},
{
  type: "Shotgun",
  bMats: 120,
  cTime: 80,
}
];

This is a small sample of all the objects in the array.I used the following code to create the options:

let wSelect = document.getElementById('wpsl1');
wSelect.appendChild(new Option(weapons[i].type));

There are 4 selects in this area, so I just changed the id of each select. The part I cannot figure out is how to assign each bMats and cTime property to each option using a loop. The end result should look like this:

<select id="wpsl1">
     <option>--SELECT ONE--</option>
     <option data-mats= "60" data-time="50">Revolver</option>
     <option data-mats= "100" data-time="70">Rifle</option>
     <option data-mats= "120" data-time="80">Shotgun</option>
</select>
<select id="wpsl2">
     <option>--SELECT ONE--</option>
     <option data-mats= "60" data-time="50">Revolver</option>
     <option data-mats= "100" data-time="70">Rifle</option>
     <option data-mats= "120" data-time="80">Shotgun</option>
</select>
<select id="wpsl3">
     <option>--SELECT ONE--</option>
     <option data-mats= "60" data-time="50">Revolver</option>
     <option data-mats= "100" data-time="70">Rifle</option>
     <option data-mats= "120" data-time="80">Shotgun</option>
</select>
<select id="wpsl4">
     <option>--SELECT ONE--</option>
     <option data-mats="60" data-time="50">Revolver</option>
     <option data-mats="100" data-time="70">Rifle</option>
     <option data-mats="120" data-time="80">Shotgun</option>
</select>

If you prefer, here is a jsFiddle instead:

https://jsfiddle.net/wm5z9s7r/15/

Any information on how to proceed is appreciated. I scoured the site for weeks looking for a solution. I do tend to get roasted when I ask questions, so I was extra viligant this time.

Answer 1

The problem is that you are not modifying the option elements after its creation, you are just adding the text in the option at creation time:

wSelect.appendChild(new Option(weapons[i].type));

A better way to do this is using the your array to populate each select in its own loop execution, that way you can create a single option element, set the data, the value, the text, and append it to the select .

for (let i = 1; i <= 4; i++) {
  const select = document.getElementById('wpsl' + i)

  weapons.forEach(function(weapon) {
    const option = document.createElement('option')
    option.dataset.mats = weapon.bMats
    option.dataset.time = weapon.cTime
    option.value = weapon.type
    option.text = weapon.type
    select.appendChild(option)
  })
}

The problem I see with this approach is that you won't be able to add or remove select s in the future without changing the second parameter in the for loop, so I would recommend to use classes to the html selector to get the possible number of select s in the page, then use that array add the option s to each select .

<select id="wpsl1" class="weapon-select"> ... </select> // HTML element

const select = Array.prototype.slice.call(document.querySelectorAll('.weapon-select'))

select.forEach(function(select) {
  weapons.forEach(function(weapon) {
    const option = document.createElement('option')
    option.dataset.mats = weapon.bMats
    option.dataset.time = weapon.cTime
    option.value = weapon.type
    option.text = weapon.type
    select.appendChild(option)
  })
})