Unable to print array in list form in html template variable received from javascript file

Question

I need to show which courses user have bought and also to show them in a receipt when user receives an email. I have a node service to send emails which contain different email template in separate files and I send all the values from js file to html template, populate data in template and then send email.

Here is the code related to js file

  link = req.body.origin + "/contact-us";
      linkContent = "Contact Us";
      msg = msg.replace("CONTENT", " " + emailTemplate.getResetSuccessTemplate);
      var courses = ["Course1", "Course2", "Course3", "Course4"];
      msg = msg.replace("COURSES", courses);

Here is the html template

let resetPasswordSuccess = `
<ul id="myList" style="font-weight: 300;font-size: 16px;color: #4A4A4A;"></ul>

<script>
var list = document.getElementById("myList");
COURSES.split(',').forEach((item) => {
    let li = document.createElement("li");
    li.innerText = item;
    list.appendChild(li);
});
</script>

I have tried to write this script code with different changes, but it does not display this array. I have used split function because this COURSES variable is received here as string.

Answer 1

You shouldn't rely on Javascript code to be executed or not in the email for something as trivial as this, better to inject directly the <li> elements in your template:

link = req.body.origin + "/contact-us";
linkContent = "Contact Us";
msg = msg.replace("CONTENT", " " + emailTemplate.getResetSuccessTemplate);

var courses = ["Course1", "Course2", "Course3", "Course4"];
var i, l = courses.length, str = '';
for(i = 0; i < l; i++){
    str += '<li>' + courses[i] + '</li>';
}
msg = msg.replace("COURSES", str);

with a simpler template like this:

let resetPasswordSuccess = `
<ul id="myList" style="font-weight: 300;font-size: 16px;color: #4A4A4A;">COURSES</ul>
`;