使用 Google Apps 脚本从 HTML 页面上的 JSON 数据创建下拉列表答案

【问题标题】：Create dropdown from JSON data on HTML page using Google Apps Script使用 Google Apps 脚本从 HTML 页面上的 JSON 数据创建下拉列表
【发布时间】：2019-03-26 18:31:28
【问题描述】：

我正在尝试从从 Google 表格接收到的 JSON 数据创建一个下拉列表。我有从 Google 表格获取数据到 JSON 的代码。我无法创建下拉菜单。我想使用这个下拉菜单来创建图表。这是一个将工作表数据转换为 json 的代码。

    function doGet(e){

     // Change Spread Sheet url
     var ss = SpreadsheetApp.openByUrl("URL to the Sheet");

    // Sheet Name.
     var sheet = ss.getSheetByName("waiverstatus");

     return getUsers(sheet); 
    }


    function getUsers(sheet){
      var jo = {};
      var dataArray = [];

    // collecting data from 2nd Row , 1st column to last row and last column
      var rows = sheet.getRange(2,1,sheet.getLastRow()-1,                   sheet.getLastColumn()).getValues();

      for(var i = 0, l= rows.length; i<l ; i++){
        var dataRow = rows[i];
        var record = {};
        record['Students'] = dataRow[0];
        record['Method'] = dataRow[1];
        record['Satisfactory_C1'] = dataRow[2];
        record['Developing_C1'] = dataRow[3];
        record['Unsatisfactory_C1'] = dataRow[4];
        record['Satisfactory_C2'] = dataRow[5];
        record['Developing_C2'] = dataRow[6];
        record['Unsatisfactory_C2'] = dataRow[7];


        dataArray.push(record);

      }  

      jo.user = dataArray;

      var result = JSON.stringify(jo);

      return         ContentService.createTextOutput(result).setMimeType(ContentService.MimeType.JSON);

    }

【问题讨论】：

一切都应该在“jo”中，你解析jo并构建下拉列表的客户端HTML在哪里？
这里只是一个非常基本的代码卫生提示：变量的名称实际上应该传达它们的目的。您创建了一个名为“ss”的变量并在其上写了一条注释；还创建了变量“sheet”并在其上添加了注释；为什么不直接将 'ss' 重命名为 spreadsheetUrl 并将工作表命名为 sheetName，这样您就不需要评论来提醒它们的用途？与变量 'jo' 相同 - 我无法仅通过读取它的名称来理解它在做什么。

标签： javascript google-apps-script

【解决方案1】：

这是一个从电子表格制作下拉列表的示例。

代码.gs

function test() {
  try {
    var html = HtmlService.createTemplateFromFile("HTML_GetJo").evaluate();
    SpreadsheetApp.getUi().showModalDialog(html, "Jo");
  }
  catch(err) {
    Logger.log(err);
  }
}

function get_jo() {
  try {
    var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
    var rows = sheet.getRange(2,1,sheet.getLastRow()-1,sheet.getLastColumn()).getValues();
    var jo = {};
    var dataArray = [];
    for( var i=0; i<rows.length; i++ ) {
      var record = {};
      record['Students'] = rows[i][0];
      record['Method'] = rows[i][1];
      record['Satisfactory_C1'] = rows[i][2];
      record['Developing_C1'] = rows[i][3];
      record['Unsatisfactory_C1'] = rows[i][4];
      record['Satisfactory_C2'] = rows[i][5];
      record['Developing_C2'] = rows[i][6];
      record['Unsatisfactory_C2'] = rows[i][7];
      dataArray.push(record);
    }
    jo.user = dataArray;
    var result = JSON.stringify(jo);
    return result;
  }
  catch(err) {
    Logger.log(err);
  }
}

HTML_GetJo.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <select id="myjo">
    </select>
    <script>
      (function () {
        google.script.run.withSuccessHandler(
          function(value) {
            var jo = JSON.parse(value);
            var select = document.getElementById("myjo");
            for( var i=0; i<jo.user.length; i++ ) {
              var user = jo.user[i];
              var option = document.createElement("option");
              option.text = user.Students;
              select.add(option);
            }
          }
        ).get_jo();
      }());
    </script>
  </body>
</html>

【讨论】：

异常：无法从此上下文中调用 SpreadsheetApp.getUi()。
您的问题是如何创建我在 html 文件和 get_jo 函数中显示的下拉菜单。你如何执行这取决于你。我假设您因为 doGet 正在使用网络应用程序。我的示例使用绑定脚本。