Apps 脚本 - 使用 .gs 文件中的数组和 .html 文件中的 jquery

Question

我使用 Google Apps 脚本中的 HTML 服务创建了一个简单的网页。

在 code.gs 文件中，我有一个 getData() 函数，它返回一个“学生”数组。

在 index.html 文件中，我有一个简单的文本输入框和一个学生姓名。在输入框中，我想输入学生的 ID 号，并根据 getData() 函数中的“学生”数组更新姓名。

我还有一个单独的 jquery.html 文件，它根据文本输入更新学生姓名。现在我有一个只有三个学生的示例数组，但我想使用 code.gs 文件中的“学生”数组。

我已经使用示例数组测试了所有内容，并且它正在以应有的方式工作。我还使用 index.html 文件直接测试了 getData() 函数，它也可以正常工作。

有没有办法在我的 jquery.html 文件中的 code.gs 文件中使用 getData() 函数中的 'students' 数组？

code.gs

function doGet() {
  return HtmlService.createTemplateFromFile('index.html').evaluate().setTitle("Student Records");
}

function getData() {
  var studentSs = SpreadsheetApp.openById("<-- spreadsheet Id -->");
  var studentSheet = studentSs.getSheets()[0];
  var studentDataRange = studentSheet.getDataRange();
  var students = studentDataRange.getValues();

  return students;
}

index.html

<input type="text" id="student-id">

<div class="student">
  <h2>student name</h2>
</div>

jquery.html

$(document).ready(function() {

  var students = [
    [1, "John"],
    [2, "Sue"],
    [3, "Bill"]
  ];

  $("#student-id").on("keyup", function() {
    var studentId = $(this).val();

    $.each(students, function(i) {
      if (studentId == students[i][0]) {
        $("h2").text(students[i][1]);
        return false;
      } else {
        $("h2").text("That student doesn't exist");
      }
    });

  });

});

更新：我终于找到了解决方案。我将 jquery.html 文件更新为：

< script >
  var students;

function onSuccess(array) {
  students = array;
}

google.script.run.withSuccessHandler(onSuccess).getData();

$(document).ready(function() {


  $("#student-id").on("keyup", function() {
    var studentId = $(this).val();

    $.each(students, function(i) {
      if (studentId == students[i][0]) {
        $("h2").text(students[i][1]);
        return false;
      } else {
        $("h2").text("That student doesn't exist");
      }
    });

  });

});

< /script>

Answer 1

两个选项：

首先，修改您的 getData() 函数以对您的数据进行 JSON 编码：

return JSON.stringify(students);

见：What is JSON and why would I use it?

然后，您可以直接从模板内部调用您的 Apps 脚本函数

var students = <?!= getData(); ?>;

见：https://developers.google.com/apps-script/guides/html/templates#calling_apps_script_functions_from_a_template

或者您可以将数据从 doGet() 传递到您的模板中：

   function doGet() {
      var template = HtmlService.createTemplateFromFile('index.html');
      template.students = getData();
      return template.evaluate().setTitle("Student Records");
    }

在你的模板中：

var students = <?!=students?>;

见：https://developers.google.com/apps-script/guides/html/templates#pushing_variables_to_templates