My task is to add table rows dynamically in the email template.
This is how I created email template
<html>
<head>
<style type=3D"text/css">
</style>
</head>
<body><div>
<p>
{{userName}} modified the order. Here are the latest order details...
<br/>
<br/>
<table style="font-family: arial, sans-serif; border-collapse: collapse; width: 100%;">
<tr>
<th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Product</th>
<th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Quantity </th>
<th style="border: 1px solid #dddddd; text-align: left; padding: 8px;">Price</th>
</tr>
{{data}}
</table>
<br/>
<br/>
<p>- - - - -</p>
<p>Please do not reply to this email. You have received this email because you have opted in to these notifications. If you wish to no longer receive these notifications, you can turn them off in your user profile.</p>
</div></body>
</html>
And from the backend, I am passing an object with the required data as below
val tableData = '<tbody>
<tr><td>ABC</td> <td>5</td> <td>100</td></tr>
<tr><td>PQR</td> <td>2</td> <td>200</td></tr>
<tr><td>XYZ</td> <td>1</td> <td>75</td></tr>
</tbody>';
const processData = {
data: table,
userName: "XYZ"
}
But in mail, I’m getting below content
Can someone please help me to pass table rows dynamically.
2
Answers
Apart from the above solution here is another one. From the backend, you can pass an array of objects. And in hbs template, built-in-helpers functions of handlebars. Built-in-helpers Doc link
Here is the link where I tried creating dynamic rows by passing an array of objects from the backend using handlebars built-in functions Link
In your email template, you are passing the variable "data" to the table, which contains the HTML string for the table body, but it is not being rendered as HTML in the email.
To render the table body as HTML, you can use triple curly braces
{{{data}}}instead of double curly braces{{data}}in your Handlebars template. This will tell Handlebars to render the HTML string as-is, without escaping the HTML tags.So the final result should look like:
You can check HTML-escaping part in the docs for more details.