如何在 html 块中循环遍历 javascript 变量？

Question

我正在尝试将 html 块传递给电子邮件服务 Nodemailer JS 函数（我正在使用 Node.JS）。我有一个 items 数组需要在电子邮件中发送：

items = [ 
   { name: 'prod1', description: 'desc1', quantity: 666, price: 666.66 },
   { name: 'prod2', description: 'desc2', quantity: 555, price: 555.55 }
];

这是JS函数。我正在使用 <table> 标签来放置 items 数组的元素。在将它发送到函数之前，我可以将它 html 放在一个 JS 变量中，但我不确定如何插入这些项目。如何让它发挥作用？

await email.sendEmail(user.email, 'Order confirmation',
      `<div style='text-align:center'>
      <p> Order Details </p> <hr>
      <table>
          <tbody>
              <tr>
                  <td> ${items} </td>
              </tr>
          </tbody>
      </table></div>`);

Answer 1

在调用之前在循环中构建包含 HTML 的字符串：

var rows = items.map(({name, description, quantity, price}) =>
    `<tr><td>${name}</td><td>${description}</td><td>${quantity}</td><td>$${price}</td></tr>`).join('');
await email.sendEmail(user.email, 'Order confirmation',
      `<div style='text-align:center'>
      <p> Order Details </p> <hr>
      <table>
          <tbody>
              ${rows}
          </tbody>
      </table></div>`);

Answer 2

遍历项目并构建您的 html table

var itemHtml = `<div style='text-align:center'>
      <p> Order Details </p> <hr>
      <table>
          <tbody>`;
for(var i=0; i<items.length; i++){
  var item = items[i];
  itemHtml += `<tr>
     <td>${item.name}</td>
     <td>${item.description}</td>
     <td>${iten.quantity}</td>
     <td>${item.price}</td>
  </tr>`; 
}
itemHtml += `</tbody></table></div>`;

然后使用您电子邮件中的变量。

await email.sendEmail(user.email, 'Order confirmation', itemHtml);

Answer 3

像这样。

const listItems = items.map((item) =>
    <td>{item.name}</td>
    <td>{item.desc}</td>
    <td>{item.price}</td>
    );
  return (
    <tr>{listItems}</tr>
  );

Answer 4

您可以使用嵌套地图循环遍历您的项目，每个项目的属性如下：

items = [ 
   { name: 'prod1', description: 'desc1', quantity: 666, price: 666.66 },
   { name: 'prod2', description: 'desc2', quantity: 555, price: 555.55 }
];

var keys = Object.keys(items[0])

await email.sendEmail(user.email, 'Order confirmation',
      `<div style='text-align:center'>
      <p> Order Details </p> <hr>
      <table>
          <tbody>
            ${items.map(item => {
              return `<tr>${keys.map(key => {
                return `<td>${item[key]}</td>`
              }).join("")}</tr>`
            }).join("")} 
          </tbody>
      </table></div>`);

如何在 html 块中循环遍历 javascript 变量？

How to loop through javascript variables inside a html block?

html

javascript

node.js

nodemailer