Actually i am using nodemailer to send html template code in node js but the problem am facing is that am not able to nest backlint in it:-
My Code:-
let mailDetails={
from: 'def@gmail.com',
to: 'abc@gmail.com',
subject: 'Order Confirmation Mail',
html: `<html> //outer backlint start from here
<body>
<p id="s"></p>
<script>
const dataElement = document.querySelector('s');
const data = [
{url: "https://images.unsplash.com/photo-1593642633279-1796119d5482?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60", name: 'Nathan', price: 'Rs. 250', description: 'IRAN'},
{url: "https://images.unsplash.com/photo-1593642633279-1796119d5482?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60", name: 'Nathan', price: 'Rs. 250', description: 'IRAN'},
];
data.map(item => {
dataElement.insertAdjacentHTML('beforebegin', `<p>${item.name}</p>`)});//inner backlints
</script>
</body>
</body>
</html>
`, //outer backlint end
};
Ps:- ignore the contents being inserted by javascript as they are dummy data. Just wanted to show the type of nesting i wanted. If i use ` then item.name gets undefined and even on using ${} it happened.
You need to escape the backtick with \. This would be the result:
<html> //outer backlint start from here
<body>
<p id="s"></p>
<script>
const dataElement = document.querySelector('s');
const data = [
{url: "https://images.unsplash.com/photo-1593642633279-1796119d5482?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60", name: 'Nathan', price: 'Rs. 250', description: 'IRAN'},
{url: "https://images.unsplash.com/photo-1593642633279-1796119d5482?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60", name: 'Nathan', price: 'Rs. 250', description: 'IRAN'},
];
data.map(item => {
dataElement.insertAdjacentHTML('beforebegin', \`<p>${item.name}</p>\`)});//inner backlints
</script>
</body>
</body>
</html>
Also, you should remove the second </body>
Making use of ejs https://www.npmjs.com/package/ejs will make such templating really quick. I am doing it using ejs.
example.js
let mailDetails = {
from: 'def@gmail.com',
to: 'abc@gmail.com',
subject: 'Order Confirmation Mail',
html: ejs.render("<path_to_ejs_template/template.ejs>"), //<-- replace this line with correct path to template.ejs
};
template.ejs
<html>
<body>
<p id="s"></p>
<script>
const dataElement = document.querySelector("s");
const data = [
{
url: "https://images.unsplash.com/photo-1593642633279-1796119d5482?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60",
name: "Nathan",
price: "Rs. 250",
description: "IRAN",
},
{
url: "https://images.unsplash.com/photo-1593642633279-1796119d5482?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=60",
name: "Nathan",
price: "Rs. 250",
description: "IRAN",
},
];
data.map((item) => {
dataElement.insertAdjacentHTML("beforebegin", `<p>${item.name}</p>`);
});
</script>
</body>
</html>