Use the forEach function to add option elements to select HTML element

Question

how to use the array .forEach function to iterate over a "users" array and populate the SELECT UI element with OPTION elements. Each OPTION should have its value set to the id of a given user, while its display text should be set to the user's name

 function displayUsers(users){
    users.forEach((users)=>{
      let sel = document.querySelector('.select-text');
      let opt = document.createElement('option');
      opt.value=users.id;
      let userName=document.createTextNode(users.name);
      opt.appendChild(userName);
      sel.appendChild(opt);


  });
};

Answer 1

This is what you are looking for.

const displayUsers = (users) => {
  users.forEach((user) => {
    const option = document.createElement("OPTION");
    const name = document.createTextNode(user.name);
    option.value = user.id;
    option.appendChild(name);
    document.querySelector('select').appendChild(option);
  });
};

Answer 2

try this :

function displayUsers(users) {
  var sel = document.querySelector('.select-text');
  users.forEach(user => {
    let opt = document.createElement('option');
    opt.value = users.id;
    opt.textContent += user.name // or opt.innerHTML += user.name
    sel.appendChild(opt);
  });
};

const users = [{
  name: "Foo"
}, {
  name: "Bar"
}]

displayUsers(users)

<select class="select-text"></select>

you better declare one the select and put it out of the forEach function

Answer 3

My favorite method to do that is using Array.prototype.reduce() it is faster than DOM manipulation and pretty concise.

const targetNode = document.getElementById('users');

const srcArray = [{id: 1, name: 'user1'}, {id: 2, name: 'user2'}, {id: 3, name: 'user3'}];

targetNode.innerHTML = srcArray.reduce((options, {id,name}) => 
  options+=`<option value="${id}">${name}</option>`, 
  '<option value="" selected></option>');

<select id="users"></select>

Answer 4

You should declare your variable sel outside the loop.

function displayUsers(users){
  let sel = document.querySelector('.select-text');
  users.forEach((users)=>{
      let opt = document.createElement('option');
      opt.value=users.id;
      let userName=document.createTextNode(users.name);
      opt.appendChild(userName);
      sel.appendChild(opt);
  });
};

document.addEventListener('DOMContentLoaded', function () {
  displayUsers([{id: 1, name: 'John'}, {id: 2, name: 'Doe'}]);
})

<select class="select-text"></select>

Answer 5

array.forEach(()=>{
  select.innerHTML += '<option>hello</option>' 
})

i think this will help

Answer 6

I prefer to do it with JQuery:

data.forEach(function(key,index){
$('#seccion_exp').append(
                         '<option value="'+key.id+'">'+key.nombreSeccion+'</option>'
                  )
 })

The data is the JSON array I used in my case given by PHP, the "#seccion_exp" is the id I gave to the select, that is actually empty. So if we append the options using the names of the fields on dbase you should be able to display the options and use the actual values from dbase.

This is the HTML part:

<div class="form-group">
    <label>Select what you need</label>
         <select class="form-control" id="seccion_exp">
             <option>Choose..</option>
         </select>
</div>

Hope this help someone.