如何将动态数据 (HTML) 插入 JavaScript 中的 SendGrid 模板

Question

我希望使用 SendGrid 模板发送电子邮件。我使用标准的 v3 api 和一个简单的 axios 调用。

我希望使用模板发送电子邮件。邮件应包含许多行和列。我不知道创建模板时会有多少rows/column。 rows/column 的数量将取决于仅在撰写电子邮件时才知道的数据。

在我的代码中，我希望：

使用 HTML 或其他推荐的方法收集数据并撰写尽可能多的 rows/column。
使用模板撰写消息，并使用 "personalisations/dynamic_template_data" 或任何其他推荐的方法将 (1) 中的 HTML 插入到模板中。
发送邮件。
我希望电子邮件将我的 HTML rows/column 视为 HTML。

我的代码（不起作用 - HTML 被视为文本）：

  //Coompose HTML
  let alertHtml = ''
  noteObjArray.forEach((nototObj)=>{
    ...
    alertHtml += (myDate !== '') ? `- ${someText} ${myDate } ` : ''
    ...
    alertHtml += '<br/>'
  })

  //Send mail using SendGrid  
  const mailSender = firebaseFunctionsConfig.sendgrid.sender
  const msg = {
    personalizations: [{
      to: [{email, name}],
      dynamic_template_data: {userName:name, amount, alertHtml}
    }],
    from: {email: mailSender.email, name: mailSender.name},
    reply_to: {email: mailSender.replyemail, name: mailSender.replyname},
    template_id: 'a-000078d4b2eb666940bbg1ee66s'
    // "content": [{"type": "text/html"}] 
  }

提前致谢！ /K

Answer 1

为了能够将 HTML 插入到 SendGrid 模板中，您只需使用 [=26 插入变量=]three 模板中的花括号而不是标准的 two。

在 SendGrid 模板中 - 此语法会将变量 textRows 解释为纯文本

{{textRows}}

在 SendGrid 模板中 - 此语法会将变量 textRows 解释为 HTML

{{{textRows}}}

感谢 Kyle Roberts 在 github 上发布解决方案！

/K

如何将动态数据 (HTML) 插入 JavaScript 中的 SendGrid 模板

How to insert dynamic data (HTML) into SendGrid Templates in JavaScript

javascript

sendgrid-api-v3

sendgrid-templates