AppScript - create dynamic HTML table from AppScript variable

Casual_Boy 0
Viewed 22

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.

google-apps-script
2 Answers

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

TheWizEd0

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>
userFDSs0
Related