如何避免在 javascript for 循环中重复代码？

Question

I have made a form with two dropdown menus:

 <select id="selectAccountCurrency"></select>

and

 <select name="Valutatype" id="selectCurrencyType"></select>

The dropdown menus are populated with various currencies using this function:

function loadAllCurrencyKeys() {
  var keys = Object.keys(ECurrencyTypes);
  for (var index = 0; index < keys.length; index++) {
      var currencyKey = keys[index];
      var newOption = document.createElement("option");
      newOption.value = currencyKey;
      newOption.text = ECurrencyTypes[currencyKey].name;
      selectCurrencyType.options.add(newOption);
  }

for (var index = 0; index < keys.length; index++) {
      var currencyKey = keys[index];
      var newOption = document.createElement("option");
      newOption.value = currencyKey;
      newOption.text = ECurrencyTypes[currencyKey].name;
      selectAccountCurrency.options.add(newOption);
  }
}

Is there a way to make the second for loop shorter? It seems to be a lot of repetition going on there.

Additional information: Here are the object I'm trying to list in both dropdown menus at the same time:

  var ECurrencyTypes = {
NOK: {value:1.00000, name: "Norske kroner", denomination: "kr"},
EUR: {value:0.10733, name: "Europeiske euro", denomination: "€"},
USD: {value:0.12652, name: "United States dollar", denomination: "$"},
GBP: {value:0.09550, name: "Pound sterling", denomination: "£"},
INR: {value:8.18624, name: "Indiske rupee", denomination: "र"},
AUD: {value:0.16129, name: "Australienske dollar", denomination: "A$"},
PHP: {value:6.48595, name: "Filippinske peso", denomination: "₱"},
SEK: {value:1.02580, name: "Svenske kroner", denomination: "kr"},
CAD: {value:0.15841, name: "Canadiske dollar", denomination: "C$"},
THB: {value:4.18410, name: "Thai baht", denomination: "฿"}
};

And this is some of the html-code with the fieldsets and select-tags:

<fieldset>
    <label for="txtAmount">Amount: </label>
    <input type="text" id="txtAmount">
    <label for="selectCurrencyType"> in </label>
    <select name="Valutatype" id="selectCurrencyType"></select>
</fieldset>

and

<fieldset>
    <label for="selectAccountCurrency">Currency:</label>
    <select id="selectAccountCurrency"></select>
</fieldset>

Answer 1

You have the second loop just becase you want to add the same option to both the select , but they need to be two different HTML elements.

Use just one loop, clone the element, and then append one to the first select and the cloned one to the other select, so you have just one loop, and they will be two different HTML elements, rather than the same one:

function loadAllCurrencyKeys() {
  var keys = Object.keys(ECurrencyTypes);
  for (var index = 0; index < keys.length; index++) {
      var currencyKey = keys[index];
      var newOption = document.createElement("option");
      newOption.value = currencyKey;
      newOption.text = ECurrencyTypes[currencyKey].name;
      selectCurrencyType.options.add(newOption);
      selectAccountCurrency.options.add(newOption.clone(true)); // <- see the .clone
  }
}

Answer 2

All the other answers seem to be correct, but you can make your code a bit less verbose by using Object.entries() and destructuring syntax in a for...of loop:

function loadAllCurrencyKeys() {
  for (const [key, value] of Object.entries(ECurrencyTypes)) {
    const newOption = document.createElement("option");
    newOption.value = key;
    newOption.text = value;
    selectCurrencyType.options.add(newOption);
    selectAccountCurrency.options.add(newOption.clone(true));
  }
}

And if you have more than two <select> elements, you can iterate those as well by passing them to the function:

function loadAllCurrencyKeys(...selects) {
  for (const [key, value] of Object.entries(ECurrencyTypes)) {
    let newOption = document.createElement("option");
    newOption.value = key;
    newOption.text = value;

    for (const select of selects) {
      select.options.add(newOption);
      newOption = newOption.clone(true);
    }
  }
}

loadAllCurrencyKeys(selectCurrencyType, selectAccountCurrency);

The only downside being that the <option> is cloned one more time than necessary for each currency type, though that will most likely be trivial overhead.

Answer 3

You can just use a single for loop and then clone the newOption that was created before inserting it into the 2nd dropdown.

 function loadAllCurrencyKeys() { var keys = Object.keys(ECurrencyTypes); for (var index = 0; index < keys.length; index++) { var currencyKey = keys[index]; var newOption = document.createElement("option"); newOption.value = currencyKey; newOption.text = ECurrencyTypes[currencyKey].name; selectCurrencyType.options.add(newOption); var clonedNewOption = newOption.clone(true); selectAccountCurrency.options.add(clonedNewOption); } }

Answer 4

If the dropdown values are different;

function loadAllCurrencyKeys(data, select) {
      var keys = Object.keys(data);
      for (var index = 0; index < keys.length; index++) {
          var currencyKey = keys[index];
          var newOption = document.createElement("option");
          newOption.value = currencyKey;
          newOption.text = ECurrencyTypes[currencyKey].name;
          select.options.add(newOption);
      }
    }

and elsewhere in the code;

loadAllCurrencyKeys(ECurrencyTypes, selectCurrencyType);
loadAllCurrencyKeys(ECurrencyTypes, selectAccountCurrency);

And if the dropdown values are the same for both the dropdowns, then you may hardcode the dropdown elements in the for loop. ie

selectCurrencyType.options.add(newOption);
selectAccountCurrency.options.add(newOption);