AppScript - create dynamic HTML table from AppScript variable-CodePudding

I´m trying to create an HTML table which get´s data from an array that is being passed from request.gs to template.html.

My current setup is:

request.gs (partial snippet):

  var products = tempSheet.getRange("B2:B").getValues();
  var template = HtmlService.createTemplateFromFile('template');
  template.products = products;
  var emailToSend = template.evaluate().getContent();

  MailApp.sendEmail({
    to: Session.getActiveUser().getEmail(),
    subject: 'test mail '    Utilities.formatDate(new Date(), "GMT 2", "dd.MM.yyyy"),
    htmlBody: emailToSend
  });

template.html (partial snippet):

  <table>
    <tr>
      <th>Product Name</th>
    </tr>
    <tr>
      <td>placeholder</td>
    </tr>
  </table>

I do have access to the products variable within the template.html using <?= products ?>. Where my current knowledge and tries ended so far is how to add table rows and the data of products in each of the rows.

CodePudding user response：

Here is how to add rows dynamically to the template. However I suggest you filter out blank rows first.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <table>
      <tr>
        <th>Product Name</th>
      </tr>
      <? for (var i = 0; i < products.length; i  ) { ?>
        <tr>
          <td><?= products[i][0] ?></td>
        </tr>
      <? } ?>
    </table>  
  </body>
</html>

Reference

Templated HTML

CodePudding user response：

It will be something like:

  <table>
    <tr>
      <th>Product Name</th>
    </tr>
    <? for (var i = 0; i < data.length; i  ) { ?>
      <tr>
        <td><?= products[i] ?></td>
      </tr>
   <? } ?>
  </table>