时间戳

首页 > 解决方案 > 如何遍历数组并将其传递给 Google 应用脚本中的 HTML 模板

javascript - 如何遍历数组并将其传递给 Google 应用脚本中的 HTML 模板

问题描述

我基本上是在尝试从 Google 电子表格中获取数据，创建 HTML 电子邮件并将其与数据一起发送。

我过去已经解决了这个问题，这是如何做到的。

代码.gs

function getData() {
   var sh = SpreadsheetApp.getActive()
       .getSheetByName('Form responses 1');

   return sh.getRange(sh.getLastRow(), 1, 1, sh.getLastColumn())
       .getValues()[0]
}

function testEmail() {
   var htmlBody = HtmlService
       .createTemplateFromFile('mail_template')
       .evaluate()
       .getContent();
   var mailADdy = "email here";
   MailApp.sendEmail({
       to:mailADdy,
       subject: 'Test Email markup - ' + new Date(),
       htmlBody: htmlBody,
   });   
}

mail_template.html

<html>
<head>
    <style>
        @media only screen and (max-device-width: 480px) {
            /* mobile-specific CSS styles go here */
        }
    </style>
</head>

<body>
    // var data runs the getData function and puts it into an array we can use
    <? var data = getData(); ?>
    <? var first = data[2]; ?>
    <? var second = data[3]; ?>
    <? var third = data[4]; ?>

    <div class="main">
        <p style="text-align: center;"><strong>This is a test HTML email.</strong></p>
        <table style="margin-left: auto; margin-right: auto;">
            <tbody>
                <tr>
                    <td style="text-align: left;">First question to be put here</td>
                    <td style="text-align: right;">
                        <strong><?= first ?></strong> 
                    </td>
                </tr>
                <tr>
                    <td style="text-align: left;">Second question here</td>
                    <td style="text-align: right;">
                        <?= second ?>
                    </td>
                </tr>
                <tr>
                    <td style="text-align: left;">Third question here</td>
                    <td style="text-align: right;">
                        <?= third ?>
                    </td>
                </tr>
                <tr>

            </tbody>
        </table>
        <p></p>

    </div>
</body>

</html>

我们运行 testEmail 函数，在 HTML 中它调用 getData 函数并返回我们在 HTML 中使用的一维数据数组。这一切都很好。但这只会查看电子表格的最后一行并发送电子邮件。它不会遍历行。

我想浏览几行数据并每行发送一封电子邮件。

根据我之前的代码，我尝试了以下操作。但它只发送一封电子邮件。这是数组中的第一行。

我只对 getData 函数进行了调整，但到目前为止，没有任何效果。这就是我现在的位置。

function getData(){
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var sheet = ss.getSheetByName("Sheet1");
    var range = sheet.getRange(2,1, sheet.getLastRow()-1, sheet.getLastColumn());
    var values = range.getValues();

    for (i=0; i < values.length ; i++) {

        return values[i];

    }    
}

它在循环的每次迭代中返回一个数组，只发送一封电子邮件。有谁知道如何解决这个问题或有任何指示？

我确实尝试将 vars 传递给 sendEmail 函数，例如

sendEmail(firstName, varA, varB) {    
    // code here
}

但无法弄清楚如何在 HTML 文件中调用/使用它们提前谢谢

标签： javascripthtmlfor-loopgoogle-apps-script

解决方案

循环遍历数据并将其传递给 HTML

示例 1.gs：

function getData1(){
  var ss=SpreadsheetApp.getActive();
  var sh=ss.getSheetByName('Sheet48')
  var rg=sh.getDataRange();
  var vA=rg.getValues();
  var html='<style>td,th{border:1px solid #000;}</style><table>';
  if(vA.length>0){
    for(var i=0;i<vA.length;i++){
      html+='<tr>';
      for(var j=0;j<vA[i].length;j++){
        if(i==0){
          html+=Utilities.formatString('<th>%s</th>', vA[i][j]);
        }else{
          html+=Utilities.formatString('<td>%s</td>', vA[i][j]);
        }
      }
    }
    html+='<table>';
  }
  return html;
}

function showExample1Dialog(){
  var userInterface=HtmlService.createTemplateFromFile('example1').evaluate();
  SpreadsheetApp.getUi().showModelessDialog(userInterface, "Example1");
}

css1.html：

<style>
body {background-color:#ffffff;}
input{padding:2px;margin:2px;}
</style>

脚本1.html：

<script>
  $(function(){
    google.script.run
    .withSuccessHandler(function(hl){
      document.getElementById('table').innerHTML=hl;
    })
    .getData1();
  });
  console.log('My Code');
</script>

res1.html：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

示例1.html：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <?!= include('res1') ?>
    <?!= include('css1') ?>
  </head>
  <body>
   <div id="table"></div>

   <?!= include('script1') ?>
  </body>
</html>

推荐阅读