CODEWITHSUNDEEP
javascripthtmlnode.jsnodemailer
Mike Varela
Mike Varela

Reputation: 527

Nodemailer and HTML templates - Loop through items in array

I've started to use Nodemailer and I'm able to send emails. I've decided to use HTML as a format and am including bootstrap for the CSS. All my template variables are getting interpolated correctly but I need to loop through an array and display those items as well. I'm unable to do this at the current time, and, need a little help.

router.post('/', auth.isAuthenticated, async (req, res) => {
    try {

        // Add request to new object - to save
        let request = new Request(req.body);

        // Save request
        let savedRequest = await request.save();

        // Get request ID and save to associated project
        let project = await Project.findByIdAndUpdate(
            request.project,
            {
                $push: { requests: savedRequest._id }
            },
            { new: true }
        );

        // If notifyPM is true, send request to project manager
        if (req.body.notifyPM) {


            let mailOptions = {
                from: process.env.NODEMAILER_EMAIL,
                to: savedRequest.projectManager.email,
                subject: `PROJECT REQUEST FOR -- ${project.projectTitle} -- FROM -- ${savedRequest.userName}`,
                html: `
                <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <title>Request</title>
</head>

<body>
  <script>
    ${savedRequest.requestItems}.forEach(myFunction);

function myFunction(item, index) {
  document.getElementById("requestContainer").innerHTML += index + ":" + item + "<br>";
}
  </script>
  <div class="container mt-3">
    <div class="row">
      <div class="col-sm">
        <div class="card">
          <div class="card-header bg-light text-dark">
            <h3><strong>Project: </strong>${project.projectTitle}</h3>
            <h4><strong>From: </strong>${savedRequest.userName}</h4>
          </div>
          <div class="card-body border border-light">
            <div class="row">
              <div class="col-sm">
                <table class="table">
                  <thead>
                    <th>Department</th>
                    <th>Job Type</th>
                    <th>Episode</th>
                  </thead>
                  <tbody>
                    <tr>
                      <td>${savedRequest.department}</td>
                      <td>${savedRequest.jobType}</td>
                      <td>${savedRequest.episode}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="row">
              <div class="col-sm">
                <h5>Request Items</h5>
                <div id="requestContainer"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
                            `
            };

            transporter.sendMail(mailOptions, function(error, info) {
                if (error) {
                    console.log(error);
                } else {
                    console.log('Email sent: ' + info.response);
                }
            });
        }

        res.status(200).json({
            message: 'Request saved successfully',
            request: savedRequest
        });
    } catch (error) {
        res.status(500).json({
            message: 'Error saving request'
        });
    }
});

Upvotes: 0

Views: 2191

Answers (1)

Mike Varela
Mike Varela

Reputation: 527

Here's my EJS rendering (HTML omitted)

// Render EJS
            const data = await ejs.renderFile(
                __dirname + '/workOrderEmailTemplate.ejs',
                {
                    user: wo.user,
                    finalDuration: wo.finalDuration,
                    title: wo.projectTitle,
                    showCode: wo.showCode,
                    episode: wo.episode,
                    woNumber: wo.workOrderNumber,
                    location: wo.location,
                    services: wo.services,
                    clientPresent: wo.clientPresent,
                    woType: wo.workOrderType,
                    notes: wo.notes
                }
            );

            const mailOptions = {
                from: process.env.NODEMAILER_EMAIL,
                to: wo.projectManagerEmail,
                subject: `WORK ORDER for -- ${wo.projectTitle} -- from -- ${wo.user}`,
                html: data
            };

            transporter.sendMail(mailOptions, function(err, info) {
                if (err) {
                    console.log('Error in SendMail function', err);
                } else {
                    console.log('Message sent: ' + info.response);
                }
            });

Upvotes: 1

Related Questions