Question

我正在使用javascript文字创建一个电子邮件模板来解析模板中javascript的值。

    <table style="border:none;">
      <tbody>
        <tr>
          <th>Service Name</th>
          <th align="right" style="width:100px;">Quantity</th>
        </tr>`
        + req.body.serviceObj.forEach(element => {
            `<tr>
                <td>${element.selectedService.Service}</td>
                <td align="right" style="width:100px;">${element.selectedService.Quantity}</td>
            </tr>`
        }); +
        `</tbody>
    </table>

上面我循环req.body.serviceObj并创建动态tr。所有模板都适用于此逻辑。但在此逻辑解析停止后。对于动态tr，只返回上面的模板<tr><td>undefined。 req.body.serviceObj是selectedService个对象的数组。

req.body.serviceObj:
    [{
        selectedService: 
        {
            ServiceId: 13, 
            Service: "OVERLOAD", 
            Description: "Container Overload", 
        …} 
    }]

Answer 1

forEach不会返回任何内容，请使用map代替
您之后有一个不受欢迎的;
由于你正在使用模板引号（```），你可以使用${...}将JS插入其中
由于map返回一个数组，您需要将其转换为join

这是一个演示：

// Just for the demo
const req = {
  body: {
    serviceObj: [
      {selectedService: {Service: 'Netflix', Quantity: 2}},
      {selectedService: {Service: 'YouTube', Quantity: 1}},
      {selectedService: {Service: 'Amazon Prime', Quantity: 5}}
    ]
  }
};

document.body.innerHTML = `
  <table style="border:none;">
    <tbody>
      <tr>
        <th>Service Name</th>
        <th align="right" style="width:100px;">Quantity</th>
      </tr>
      ${
        req.body.serviceObj.map(element => {
          return `<tr>
              <td>${element.selectedService.Service}</td>
              <td align="right" style="width:100px;">${element.selectedService.Quantity}</td>
          </tr>`;
        }).join('')
      }
      </tbody>
  </table>
`;

java脚本模板在创建动态tr时解析undefined

1 个答案: