CODEWITHSUNDEEP
javascriptjquerystringtemplate-literals
Steven
Steven

Reputation: 1414

Template Literals with a ForEach in it

Is it possible to return a string value in ForEach in a Template literal so it will be added in that place? Because if I log it it returns undefined. Or is that like I typed not possible at all?

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).forEach(function (key) {
        return "<option value='" + key + "'>" + obj[key] + "</option>"           
    })}
    `;

Upvotes: 25

Views: 29366

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1074435

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.

Upvotes: 62

stephledev
stephledev

Reputation: 242

Since map() returns an array, @T.J. Crowder's answer will produce invalid HTML as the toString() method of an array will be called inside the template literal, which uses commas to delimit the array. To fix this, just append join('') to explicitly use no delimiter:

${Object.keys(obj).map(key => (
    `<option value="${key}">${obj[key]}</option>`
)).join('')}

Also, you can use template literals inside the map itself.

Upvotes: 21

Related Questions