Как перебрать массив и передать его в шаблон HTML в скриптах приложения Google - PullRequest
Новая
       1

Как перебрать массив и передать его в шаблон HTML в скриптах приложения Google

0 голосов
/ 15 января 2019

Я в основном пытаюсь взять данные из электронной таблицы Google, создать электронное письмо в формате HTML и отправить его с данными.

Я справлялся с этим в прошлом, вот как.

Code.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];

    }    
}

Он возвращает массив на каждой итерации цикла, отправляет только одно электронное письмо. Кто-нибудь знает, как это исправить или есть какие-то указатели?

Я попытался передать переменные в функцию sendEmail, что-то вроде 

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

, но не могу понять, как вызывать / использовать их в файле HTML Заранее спасибо

Ответы [ 2 ]

0 голосов
/ 16 января 2019

@ Купер, спасибо за предложенное решение, я еще не пробовал, но попробую.

После нескольких размышлений и исследований эта статья Google действительно полезна Я подумал, что было бы легче разделить то, что я хотел сделать, на разные функции и разыграть передачу. 

function createHTML(data){
  var t = HtmlService.createTemplateFromFile('template');
  t.data = data;
  sendEmail(t.evaluate().getContent());
}

function sendEmail(htmlBody){
  var mailAddy = "email addy";
  MailApp.sendEmail({
       to:mailAddy,
       subject: 'Test Email markup - ' + new Date(),
       htmlBody: htmlBody,
   });
}

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 (var i = 0; i < values.length; i++){
    var data = values[i];
    createHTML(data);
  }
}

Функция getdata получает строку данных, которую я хочу использовать, из электронной таблицы, а затем передает ее в createHTML, который создает HTML-текст письма. это решает мою блокировку попыток перебрать данные либо с помощью кода Google или HTML.

Затем он передает результаты в функцию sendEmail для отправки электронного письма.

это была функция createHTML, которая изменила правила игры. Объявление t.data в файле .gs и передача значений в html способом, который я знаю, означало, что я мог бы перебрать свой массив. Если это имеет смысл.

Это было мое решение, но, конечно, я открыт для всех способов сделать это и спросить, почему х лучше.

0 голосов
/ 16 января 2019

Цикл данных и передача их в HTML

exampl1.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>

script1.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>

example1.html: 

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

   <?!= include('script1') ?>
  </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...