时间戳

首页 > 解决方案 > 将数据数组从谷歌应用脚​​本函数写入 HTML 段落

标签

google-apps-script - 将数据数组从谷歌应用脚​​本函数写入 HTML 段落

标签

问题描述

我有这个 google 测试表，其中包含我为测试目的而创建的虚拟数据

https://docs.google.com/spreadsheets/d/1Hxjr1ai6KWWJyyQLPJ2GRWYgQftyBxJmiKEu25Co2aQ/edit#gid=0

加密数据图像

通过使用 google app 脚本，我创建了一个带有 HTML 下拉框（在 HTML 中选择）的 google web 应用程序，它从上面的 google 表格中获取数据。

https://script.google.com/macros/s/AKfycbzYDDLg6YDNLBo-3jKQpcedU9jLJbxbOUDMh5YayKtVaurN2COq/exec

谷歌网络应用程序成功地从 HTML 段落标记中的下拉框中显示用户选择，但网络应用程序无法显示所选加密货币的数据数组。错误消息是“未定义”。我刚刚做这个谷歌应用脚​​本的东西几个星期了，我很难理解为什么用户选择的带有数据的数组没有显示在 HTML 页面上。

我的下一步将是尝试绘制用户从 HTML 下拉框中选择的数据，但在我这样做之前，我需要直观地确认数据确实存在。

如果我在下拉框中选择 nano 这是我从谷歌应用程序脚本 Logger.log 获得的数据：

[19-02-22 12:02:15:237 PST] 工作表中的列数 = 5

[19-02-22 12:02:15:238 PST] 表中的加密货币 = Bitcoin,Ethereum,Nano,Status,,,,,,,,,,,,,,,,,,,,

[19-02-22 12:02:15:241 PST] 下拉框选择 = Nano

[19-02-22 12:02:15:244 PST] 要绘制的数据 =0.9,0.8,0.7,0.8,

这告诉我谷歌应用程序脚本正在工作，但不工作的是网站上 HTML 段落标签中的数据显示。

代码.gs

function getSelectList() 
{
  // puts crypto currency names in dropdown box on website
  var ss = SpreadsheetApp.openById("1Hxjr1ai6KWWJyyQLPJ2GRWYgQftyBxJmiKEu25Co2aQ");
  var sheet = ss.getSheetByName("Sheet1");
  var lastRow = sheet.getLastRow();
  var myRange = sheet.getRange("A2:A" + lastRow);
  var data = myRange.getValues();
  return data;
}

function Selection(crypto_name) 
{
var ss = SpreadsheetApp.openById("1Hxjr1ai6KWWJyyQLPJ2GRWYgQftyBxJmiKEu25Co2aQ");
var sheet = ss.getSheetByName("Sheet1");
var name = sheet.getRange('A2:A101').getValues();
var Nc = sheet.getLastColumn();   
Logger.log("The number of columns in sheet = " + Nc); 
Logger.log("Crypto currencies in sheet = " + [name]);  
Logger.log("Dropdown box selection = " + crypto_name); 

  for (i = 0; i < name.length; i++)
     {
      if(name[i]== crypto_name)
        { 
         var TS = sheet.getRange(i+2,2,1,Nc).getValues();
         Logger.log("Data to plot =" + [TS]); 
        }
     }

return TS ;  
}

 function doGet() 
 {
 return HtmlService.createHtmlOutputFromFile("Web");
 }

网页.html

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<select id="MyBox" onchange="GetMyBox(this)">  </select>
<script>
(function() 
{
google.script.run.withSuccessHandler( function (selectList) 
{
var select = document.getElementById("MyBox");
for( var i=0; i<selectList.length; i++ ) 
{
var option = document.createElement("option");
option.text = selectList[i][0];
select.add(option);
}
}
).getSelectList();
}());

function GetMyBox(sel) 
{
var crypto_name = sel.value;  
document.getElementById("demo1").innerHTML = crypto_name;  
var data = google.script.run.Selection(crypto_name); 
document.getElementById("demo2").innerHTML = data; 
}        

</script>   

<p id="demo1"></p>   
<p id="demo2"></p>   

</body>
</html>

标签： google-apps-scriptweb-applications

解决方案

这并不是一个完整的答案，我只是根据我认为您要完成的工作来获取您的代码并对其进行了一些重新格式化。我没有仔细查看您的代码，但我很确定您仍然需要进行一些调试。

在 html 中，您似乎想要使用 JQuery 就绪功能，因此我在头部添加了一些 JQuery 引用。如果那不是您的计划，那么您可能需要更改为 window.onload。

html:

<!DOCTYPE html>
<html>
  <head>
    <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>
  </head>
  <body>

    <select id="MyBox" onchange="GetMyBox(this)">  </select>
  <script>
    $(function() {
      google.script.run
      .withSuccessHandler(selectList)//You can just put the name of the function in this way
      .getSelectList();
    });

    function GetMyBox(sel) {
      var crypto_name = sel.value;  
      google.script.run
      .withSuccessHandler(function(data){//you put an anonymous function this way
           document.getElementById("demo2").innerHTML = data; 
         }
      .Selection(crypto_name);
    }        

    function selectList(data){
    var select = document.getElementById("MyBox");
      for( var i=0; i<data.length; i++ ) {
        var option = document.createElement("option");
        option.text = data[i][0];
        select.add(option);
    }
</script>   

<p id="demo1"></p>   
<p id="demo2"></p>   

</body>
</html>

谷歌脚本：

function getSelectList() {
  // puts crypto currency names in dropdown box on website
  var ss = SpreadsheetApp.openById("1Hxjr1ai6KWWJyyQLPJ2GRWYgQftyBxJmiKEu25Co2aQ");
  var sheet = ss.getSheetByName("Sheet1");
  var lastRow = sheet.getLastRow();
  var myRange = sheet.getRange("A2:A" + lastRow);
  var data = myRange.getValues();
  return data;//this is a 2d array it might be what you want for select options
}

function Selection(crypto_name) {
  var ss = SpreadsheetApp.openById("1Hxjr1ai6KWWJyyQLPJ2GRWYgQftyBxJmiKEu25Co2aQ");
  var sheet = ss.getSheetByName("Sheet1");
  var name = sheet.getRange('A2:A101').getValues();
  var Nc = sheet.getLastColumn();   
  Logger.log("The number of columns in sheet = " + Nc); 
  Logger.log("Crypto currencies in sheet = " + [name]);  
  Logger.log("Dropdown box selection = " + crypto_name); 
  for (i = 0; i < name.length; i++) {
    if(name[i]== crypto_name) { 
      var TS = sheet.getRange(i+2,2,1,Nc).getValues();
      Logger.log("Data to plot =" + [TS]); 
    }
  }
  return TS ; //this is a 2d array so it's not ready for html yet
}

推荐阅读