Unable to nest backlint( ` ) in html-CodePudding

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: '[email protected]',
        to: '[email protected]',
        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=&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=&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.

CodePudding user response：

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=&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=&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>

CodePudding user response：

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: '[email protected]',
  to: '[email protected]',
  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=&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=&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>