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数组的元素。我可以在将其发送到函数之前将其放入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表

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变量？

4 个答案: