web-dev-qa-db-fra.com

Littéraux de modèle avec un ForEach dedans

Est-il possible de retourner une valeur de chaîne dans ForEach dans un modèle littéral afin qu'elle soit ajoutée à cet endroit? Parce que si je le connecte, il renvoie undefined. Ou est-ce comme si je n'avais pas tapé du tout?

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>"           
    })}
    `;
javascriptjquerystringtemplate-literals
9
Steven

Non, car forEach ignore la valeur de retour de son rappel et ne retourne jamais rien (ainsi, l'appeler donne undefined).

Vous recherchez map , qui fait exactement ce que vous voulez:

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("")}
    `;

Notez qu'après le mappage, le code utilise .join("") pour obtenir une seule chaîne du tableau (sans aucun délimiteur). (J'ai oublié cela au départ - en faisant trop React stuff - mais stephledev l'a souligné dans sa réponse .)

Note latérale: Ce n'est pas un "littéral de chaîne", c'est un modèle littéral .

25
T.J. Crowder

Puisque map() renvoie un tableau, @ T.J. La réponse de Crowder produira du HTML non valide car la méthode toString() d'un tableau sera appelée dans le littéral du modèle, qui utilise des virgules pour délimiter le tableau. Pour résoudre ce problème, ajoutez simplement join('') pour utiliser explicitement aucun délimiteur:

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

En outre, vous pouvez utiliser des littéraux de modèle à l'intérieur de la carte elle-même.

5
stephledev