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>`
})
Amadan
200k23 gold badges254 silver badges321 bronze badges
5 Answers 5
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">
answered Feb 13, 2019 at 5:09
Tom O.
5,9813 gold badges24 silver badges36 bronze badges
Sign up to request clarification or add additional context in comments.
Comments
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>
answered Feb 13, 2019 at 5:05
Adrian Brand
21.8k4 gold badges46 silver badges67 bronze badges
Comments
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>
answered Feb 13, 2019 at 5:07
Mamun
69k9 gold badges51 silver badges62 bronze badges
Comments
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>
answered Feb 13, 2019 at 5:11
Shidersz
17.2k2 gold badges28 silver badges52 bronze badges
Comments
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>4 Comments
Stefanpgr
How do I do this without jQuery?
vmf91
I have added a snippet with pure JS.
Adrian Brand
You need to be setting value, not id
vmf91
The value is set by innerHTML
lang-js