javascript - 如何从 google 表格中提取随机行并在 HTML 表中使用它

Question

我正在开发一个小项目，我想随机提取 google 工作表的一行，然后在 HTML 表中使用该数据。

目前，我的解决方案是首先使用 javascript 生成随机数，然后使用 this method 从 google 表格为该行生成一个 HTML 表。 。因此，我最终得到了一个 HTML 表格的 URL，其中只有标题行和随机数据行，类似于 this 。然后我将该表作为对象嵌入到我的 HTML 页面中。这是它的要点:

< script >
  window.onload = function() {
    var albumno = Math.random() * 408;
    var albumno = Math.round(albumno);
    var albumurl = "https://docs.google.com/spreadsheets/d/UNIQUE-DOCUMENT-ID/gviz/tq?tqx=out:html&tq=SELECT%20B%2C%20D%2C%20E%2C%20F%2C%20G%20WHERE%20A%20MATCHES%20%27" + albumno + "%27&gid=1739065700";

    document.getElementById("output").innerHTML = "ALBUM NUMBER: " + albumno + ".";
    document.getElementById("albumpath").innerHTML = '<object align="middle" data="' + albumurl + '">';
  }; 
</script>

有两个主要缺点。首先，当作为对象嵌入时，表无法(轻松)格式化。其次，我的 Google 工作表是每周添加的列表，因此我必须手动调整 javascript 中生成的随机值的限制。

有没有办法在 Javascript 中更有效地做到这一点？也许通过抓取整个表格，然后随机选择一行数据，这些数据可以在适当的 HTML 表格中使用(即不作为对象嵌入)？或者也许存在一个谷歌表格 API 可以帮助我？

更新:

我成功地在 Google Apps 脚本中编写了一个快速函数，用于选择随机数据行。我想出了两种输出数据的方法，选项 1 作为数组，选项 2 作为表的 HTML 代码。现在我如何在 HTML 页面中调用这个函数并利用这些数据？

}

function randomalbum() {
  
  //get spreadsheet
  var ss = SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/d/[DOCID]/edit#gid=1');
  var sh = ss.getSheetByName("Pick List");
  
  //find last album
  var Fvals = sh.getRange("F:F").getValues();
  var Flast = Fvals.filter(String).length;
  var colnum = sh.getRange(2, 1, Flast).getValues();  
  var albumlast = Math.max.apply(null, colnum)-1;
  
  //pick random row (note the row an album is in is 1 more than the album no.)
  var rowrand = Math.round(Math.random()*(albumlast+1));
  
  //extract data of interest
  var albumrand = rowrand -1;
  var pick = sh.getRange(rowrand, 5).getValues();
  var artist = sh.getRange(rowrand, 6).getValues();
  var title = sh.getRange(rowrand, 7).getValues();
  
  //make array (option 1)
  var array = [albumrand, pick, artist, title];
  
  return array;
  
  //make HTML string (option 2)  
  var HTMLString = " <table style='width:100%'>"
                   + "<tr>"
                     + "<th>Album No.</th>"
                     + "<th>Picked By</th>"
                     + "<th>Artist</th>"
                     + "<th>Artist</th>"
                   + "</tr>"
                   + "<tr>"
                     + "<td>" + albumrand + "</td>"
                     + "<td>" + pick + "</td>"
                     + "<td>" + artist + "</td>"
                     + "<td>" + title + "</td>"
                    + "</tr>"
                    +"</table>"
  
   HTMLOutput = HtmlService.createHtmlOutput(HTMLString);
 
  return HTMLOutput
  
}

Answer 1

使用 Google Sheets API 而不需要运行自己的服务器:我记得不久前按照以下文章中的建议解决了这个问题。

https://coderwall.com/p/duapqq/use-a-google-spreadsheet-as-your-json-backend

您可能需要其他服务来将 CORS header 添加到 Google 响应中，因为 cors.io 显然已不存在。