将电子表格中的所有数据转换为 html答案

【问题标题】：Get all data from spreadsheet into html将电子表格中的所有数据转换为 html
【发布时间】：2019-04-06 06:00:01
【问题描述】：

当我将它作为 Google 脚本（在 code.gs 中）运行时，它可以工作，但是，当我将它带到 index.html 文件时，我无法从电子表格中获取全部数据。

工作表应该是 3D，sheets[0] 应该显示工作表 0 中的所有数据（行 x 列）但是在data 中，我得到了它看起来像一个字符串的样子（当我执行data[0] 时，它只显示第一个字符）。为什么？

代码如下：

气体

function doGet(request) {
  return HtmlService.createTemplateFromFile('index')
    .evaluate();
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
    .getContent();
}

function getSheetsData(){
  ss = SpreadsheetApp.openById('id_key');         
  var sheets = []; 
  for (var i = 0; i < ss.getSheets().length; ++i) {           
    sheets.push(ss.getSheets()[i].getDataRange().getDisplayValues());  
  }    
  return (sheets)
}

客户端

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">    
    <?!= include('css'); ?>    

    <!-- the idea is to pull the data from the spreadsheet and build slides with the questions to show a Quiz of questions (not yet done)-->
    <script>
      var datas = null;
      google.script.run.withSuccessHandler(function(result){ 
        datas = result;
        console.log(datas); //YES, datas has the data
      }).getSheetsData();
      console.log(datas);   //NO, datas is null
    </script>         
    </head>

  <body>    
  <h1>TESTS QUIZ [WEB APP]
    <br>
    <br>
      <!-- Build select options from spreadsheet sheets -->
      <?  var ss = SpreadsheetApp.openById('id_key'); ?>
      <select class="classic" id="sheet" onchange="someFunctionWillGoHereToStartTheQuiz">
      <option value="" disabled selected style="display:none;">Choose Quiz</option>
      <? for (var i = 0; i < ss.getSheets().length; ++i) { ?>      
        <option value="<?=i?>"><?= ss.getSheets()[i].getSheetName() ?></option>   
      <? } ?>
      </select>  
      <br>
      <br>
  </h1>
  <!--some code will go here to show the questions in the page-->

【问题讨论】：

您的脚本是否具有此处提到的两个端点之一的授权：developers.google.com/apps-script/reference/spreadsheet/…？您需要对 googleapis.com/auth/spreadsheets.currentonly 或 googleapis.com/auth/spreadsheets 感到满意，或者更准确地说，这两个端点中的任何一个都需要对您满意。
是的。我可以在项目属性下看到 googleapis.com/auth/spreadsheets
您应该使用 <tr></tr> 之类的标签从数组构建 html 表。您不能只是将数组对象放在 html 文件中并自动期望它显示所有内容。
问题出在这里：data = = sheet ?>;我只能传递纯文本，例如包含电子表格中所有单元格文本的长字符串，但我无法将其格式化为数组形状，分隔元素
放弃整个使用 sn-ps 并异步构建您的页面。使用 JSON 格式发送大量信息（JSON.stringify、JSON.parse），特别是如果该信息具有复杂的结构或被禁止的类型（如Dates）。查看official best practices

标签： html google-apps-script web-applications google-sheets

【解决方案1】：

一个建议是使用这种方法。

创建一个函数服务器端来获取所有数据
使用成功处理程序检索数据客户端并调用google.script.run.myFunction()

气体

function getSheetsData(){
 ss = SpreadsheetApp.openById('id_key_spreadsheet');         
    var sheets = []; //except if you want to add more datas no need to declare a 3D array
    for (var i = 0; i < ss.getSheets().length; ++i) {
       // I'v corrected this part so you don't get any "out of bounds" errors
      sheets.push(ss.getSheets()[i].getDataRange().getDisplayValues());  
    }
  return (sheets)
}

客户端

<script>
 var datas = null;
 google.script.run.withSuccessHandler(function(result)
   { 
     datas = result;
   }).getSheetsData();
</script>

现在，如果您想获取第一个字符串，请考虑使用 2 次 [] datas[0][0] 因为您使用的是二维数组。您的问题也可能来自这里。

参考文献

google.script.run

【讨论】：

感谢您的意见，我会调查的。但是我还不能得到“数据”，当我运行 console.log(datas) 时它显示为空。 datas 只有在 withSuccessHandler function() 中才是正确的。顺便说一句，少了一个“h”。
@josemruiz 你能和我分享你的代码吗？我一定会让它工作的。 Best.Also 这很正常，您不会直接填充数据。当您运行异步函数时，请在调用 getSheetsData 后创建一个睡眠函数，您会看到正常填充数据