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

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.

Solution

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>
`;