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>`   
})

Tom O. · Accepted Answer · 2019-02-13 05:09:02Z

2

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

Adrian Brand · Accepted Answer · 2019-02-13 05:05:48Z

0

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

Mamun · Accepted Answer · 2019-02-13 05:07:20Z

0

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

Shidersz · Accepted Answer · 2019-02-13 05:11:28Z

0

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

vmf91 · Accepted Answer · 2019-02-13 15:53:27Z

0

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>

edited Feb 13, 2019 at 15:53

answered Feb 13, 2019 at 5:04

vmf91

1,94722 silver badges28 bronze badges

4 Comments

Stefanpgr Over a year ago

How do I do this without jQuery?

vmf91 Over a year ago

I have added a snippet with pure JS.

Adrian Brand Over a year ago

You need to be setting value, not id

vmf91 Over a year ago

The value is set by innerHTML

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related