No, because forEach
ignores the return value of its callback and never returns anything (thus, calling it results in undefined
).
You're looking for map
, which does exactly what you want:
return `<div>
<form id='changeExchangeForViewing'>
<label for='choiceExchangeForLoading'>Change the exchange</label>
<div class='form-inline'>
<select id='choiceExchangeForLoading' name='choiceExchangeForLoading' class='form-control'>
${Object.keys(obj).map(function (key) {
return "<option value='" + key + "'>" + obj[key] + "</option>"
}).join("")}
`;
Note that after mapping, the code uses .join("")
to get a single string from the array (without any delimiter). (I forgot this initially — been doing too much React stuff — but stephledev pointed it out in his/her answer.)
That said, it might be easier to read if you break it up, and you can use an arrow function rather than a traditional function, perhaps with another template literal:
const options = Object.keys(obj).map((key) =>
`<option value='${key}'>${obj[key]}</option>`
);
return `<div>
<form id='changeExchangeForViewing'>
<label for='choiceExchangeForLoading'>Change the exchange</label>
<div class='form-inline'>
<select id='choiceExchangeForLoading' name='choiceExchangeForLoading' class='form-control'>
${options.join("")}
`;
Finally, I'll mention Object.entries
, which gives you an arrow of [key, value]
arrays, which you might want to use in mapping the options (or not, Object.keys
is fine too):
const options = Object.entries(obj).map((key, value) =>
`<option value='${key}'>${value}</option>`
);
return `<div>
<form id='changeExchangeForViewing'>
<label for='choiceExchangeForLoading'>Change the exchange</label>
<div class='form-inline'>
<select id='choiceExchangeForLoading' name='choiceExchangeForLoading' class='form-control'>
${options.join("")}
`;
Side note: That's not a "string literal," it's a template literal.