在客户端 javascript 中访问服务器端数据答案

【问题标题】：Access server-side data in client-side javascript在客户端 javascript 中访问服务器端数据
【发布时间】：2017-03-08 17:39:03
【问题描述】：

尝试在 google-script 中创建一个允许用户选择工作表、命名和创建日历的网络应用程序。

我想我可以将所有解析为 json 的重要信息推送到客户端，然后只使用那里的脚本来访问 template.data 的不同部分，然后再调用 google-script 代码来创建日历。但我什至不能用我点击的任何名称发出警报。

所以我期望使用下面的代码发生的事情是单击任何列表项只会返回 <li> 内的文本，但每个列表项都会发出警报“未定义”

我在 code.gs 中的 doGet()

function doGet() {
  // Parse all sheets available and set as element to template
  var template = HtmlService.createTemplateFromFile("ui");
  var spreadsheet = SpreadsheetApp.openByUrl(url);

  var sheets = spreadsheet.getSheets();
  var json = [];
  sheets.forEach(function(sheet){
    json.push(getScheduleAsJSON(sheet));
  });
  template.data = json;  
  return template.evaluate();
}

我的 ui.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function getName(){
        alert(this.InnerHTML);
      }
    </script>
  </head>
  <body>
    <ul id="SheetList">
      <? for (var i = 0; i < data.length; i++){?>
        <li onclick="getName();">
          <?=data[i].name;?>
        </li>
      <?}?>
    </ul>
    <ul id="NameList">
      <li onclick="getName();">foo</li>
    </ul>
  </body>
</html>

编辑1：

所以看起来我什至在尝试 HTML 部分时都搞砸了，更改了这些位。

<li onclick="getSheetName(this);">
  <?=data[i].name;?>
</li>

function getSheetName(item){
  console.log(item.innerHTML);
}

仍然希望能够以某种方式访问 jsons 计算的服务器端数组，而不必调用 google.script.run 每个函数。

编辑 2：

认为我已经确定了我要寻找的东西；属性服务。我仍然不知道如何实现和实际访问我假设我存储在其中的数据。到目前为止，我尝试过的一切总是产生相同的“未定义”结果。目前将整个 json 作为字符串存储在我的脚本属性中，但无法访问 console.log 上的任何内容，所以完全不确定这是否真的是向前迈出的一步。

所以目前添加到我的 doGet() 中：

var properties = PropertiesService.getScriptProperties();
properties.setProperty("schedule-data", JSON.stringify(data));

这个函数是用 google.script.run.onsuccesshandler.myfunc() 调用的：

function getProperties(){
  var properties = PropertiesService.getScriptProperties();
  return properties.getProperty("schedule-data")[0].name;
}

Logger.log(json[0].name) 返回“2017 年 3 月”，所以仍然完全不知道为什么我在 html 方面没有得到任何东西......

【问题讨论】：

如果您希望代码在 Web 应用程序加载后运行，请使用 window.onload = thisFunctionRunsAfterLoad() {console.log('it did actually run')} 我不会使用警报功能来确定您的浏览器代码中实际发生的情况。对浏览器使用console.log() 语句，对.gs 脚本使用Logger.log() 语句。在 Chrome 中按 f12 键在浏览器中打开控制台。您似乎正在尝试创建文件选择器或类似文件选择器的东西。
是的，可能类似于文件选择器，但我当前的问题是我只希望我已经在服务器端解析的 json 数据可用于我的客户端脚本。在这里，我什至只是访问任何项目的 innerHTML。
我提供了一个工作示例，该示例使用来自数据数组的项目符号列表创建 Web 应用程序。该示例不包括从电子表格中获取数据。答案旨在提供一个基本的起点。

标签： javascript html google-apps-script

【解决方案1】：

您缺少data，它需要使用“scriptlet”加载到 HTML 中：

<? var data = getData(); ?>

您可以在以下链接中查看文档中的示例：

Calling Apps Script functions from a template

ui.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      window.onload = function myOnloadFunc() {
        console.log('The Web App has loaded')
        google.script.run
         .withSuccessHandler(funcToRunOnSuccess)
         .getData();
      }

      window.funcToRunOnSuccess = function(returnedData) {

        window.mySpreadsheetData = returnedData;
        console.log('window.mySpreadsheetData: ' + window.mySpreadsheetData)
      }

    </script>
  </head>
  <body>
    <div>Anything</div>

    <? var data = getData(); ?>

    <ul id="SheetList">
      <? for (var i = 0; i < data.length; i++){?>
        <li onclick="getName();">
          <?= data[i]; ?>
        </li>
      <?}?>
    </ul>

    <ul id="NameList">
      <li onclick="getName();">foo</li>
    </ul>
  </body>
</html>

代码.gs

function getData() {
  var arrayOfJSON,allSheets,data,html,ss,template;
  //ss = SpreadsheetApp.openByUrl(url);

  //allSheets = ss.getSheets();
  //arrayOfJSON = [];

  /*allSheets.forEach(function(sheet){
    Logger.log('sheet: ' + sheet)
    json.push(sheet);
  });
  */
  arrayOfJSON = ['one','two','three'];
  return arrayOfJSON;
}

function doGet() {
  var html,template;

  template = HtmlService.createTemplateFromFile("ui");  
  html = template.evaluate();

  return html;
}

【讨论】：

说数据是一个数组比如[{name=foo, id=123, contents={alice=[], bob=[], carl=[]}}]，现在我' m 当前列出每个名称，我想要的是 onclick 以访问内容并填充另一个 <ul> 但甚至无法访问结构的任何部分。编辑（误按回车）：如果我可以将 json 的内容设置为脚本客户端可访问的变量，例如：“var data = =getData();?>;”
好的。您需要将 JSON 数据存储在浏览器中。有几种方法可以做到这一点。 1）将数据放入浏览器的window对象。请参阅更新的答案：window.mySpreadsheetData = <? var data = getData(); ?>; 您还可以将数据放入会话存储中。 window.sessionStorage
我不断收到错误“预期功能但收到；”尝试最新答案时
抱歉，试试：<? window.mySpreadsheetData = getData(); ?>; console.log('window.mySpreadsheetData: ' + window.mySpreadsheetData)
窗口未定义，不知道我应该如何在我的 code.gs 中定义它