How do I loop through Javascript array objects with forEach to create an element?

Question

I'm trying to loop through an array object with JavaScript forEach, then the function should create an OPTION element, set its value to the item's id, set its text to the item's name, and then add the OPTION to the SELECT element?

I've tried returning each item as template literals

const currencies = [{
        id: 'USD', name: 'US Dollars'
      },     {    
        id: 'UGX', name: 'Ugandan Shillings'
      },     {
        id: 'KES', name: 'Kenyan Shillings'
      },     {
        id: 'GHS', name: 'Ghanian Cedi'
      },     {
        id: 'ZAR', name: 'South African Rand'
      }];

currencies.forEach(function(currency){    
  str = `<option value="${id}"></option>`   
})    

Answer 1

With jQuery

 const currencies = [{ id: 'USD', name: 'US Dollars' }, { id: 'UGX', name: 'Ugandan Shillings' }, { id: 'KES', name: 'Kenyan Shillings' }, { id: 'GHS', name: 'Ghanian Cedi' }, { id: 'ZAR', name: 'South African Rand' }]; currencies.forEach(function(currency){ $('#list').append(`<option value="${currency.id}">${currency.name}</option>`) }) 

 <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <select id="list"></select> 

With pure JS

 const currencies = [{ id: 'USD', name: 'US Dollars' }, { id: 'UGX', name: 'Ugandan Shillings' }, { id: 'KES', name: 'Kenyan Shillings' }, { id: 'GHS', name: 'Ghanian Cedi' }, { id: 'ZAR', name: 'South African Rand' }]; currencies.forEach(function(currency){ var el = document.getElementById('list'); var elChild = document.createElement('option'); // Give the new div some content elChild.innerHTML = currency.name; elChild.id = currency.id // Jug it into the parent element el.appendChild(elChild); }) 

 <select id="list"></select> 

Answer 2

 const currencies = [{ id: 'USD', name: 'US Dollars' }, { id: 'UGX', name: 'Ugandan Shillings' }, { id: 'KES', name: 'Kenyan Shillings' }, { id: 'GHS', name: 'Ghanian Cedi' }, { id: 'ZAR', name: 'South African Rand' }]; $('select').append(currencies.map(c => $(`<option value="${c.id}">${c.name}</option>`))); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select></select> 

Answer 3

You have to use Template literals (that are enclosed with back-tick (` `)) which allows embedded expressions:

 const currencies = [{ id: 'USD', name: 'US Dollars' }, { id: 'UGX', name: 'Ugandan Shillings' }, { id: 'KES', name: 'Kenyan Shillings' }, { id: 'GHS', name: 'Ghanian Cedi' }, { id: 'ZAR', name: 'South African Rand' }]; var str = ''; currencies.forEach(function(currency){ str += `<option value=${currency.id}>${currency.name}</option>`; }); document.getElementById('mySelect').innerHTML = str; 

 <select id="mySelect"></select> 

Answer 4

You can do something like this:

 const currencies = [{ id: 'USD', name: 'US Dollars' }, { id: 'UGX', name: 'Ugandan Shillings' }, { id: 'KES', name: 'Kenyan Shillings' }, { id: 'GHS', name: 'Ghanian Cedi' }, { id: 'ZAR', name: 'South African Rand' }]; const selectEl = document.querySelector('#selectEl'); currencies.forEach(function(currency) { const option = document.createElement('option'); option.setAttribute('value', currency.id); option.text = currency.name; selectEl.appendChild(option); }) 

 <select id="selectEl"> 

Answer 5

Here you have one approach thay uses Array::map() and Array::join() :

 const currencies = [ {id: 'USD', name: 'US Dollars'}, {id: 'UGX', name: 'Ugandan Shillings'}, {id: 'KES', name: 'Kenyan Shillings'}, {id: 'GHS', name: 'Ghanian Cedi'}, {id: 'ZAR', name: 'South African Rand'} ]; let sel = document.getElementById("mySelect"); sel.innerHTML = currencies.map( ({id, name}) => `<option value=${id}>${name}</option>` ).join(""); 

 <select id="mySelect"></select>