使用 Code.gs 中的 javascript 从数组值中获取动态 html 表答案

【问题标题】：Dynamic html Table from an array values using javascript in Code.gs使用 Code.gs 中的 javascript 从数组值中获取动态 html 表
【发布时间】：2021-11-13 09:08:05
【问题描述】：

我是 javascript 的新手，但我愿意以某种方式学习。

正如您在附图中看到的那样，我已经设法从谷歌表格中提取了一些数据到一个数组中。我正在努力将这个数组数据转换成一个 html 页面，有人可以指导我如何做到这一点javascript。该表应该是动态的，因为每次完成搜索时，返回数组的行数都会改变。数据位于 code.gs 文件中的变量中，我需要将其链接到 javascript。非常感谢。

【问题讨论】：

标签： javascript arrays google-apps-script dynamic-tables

【解决方案1】：

如果您想从电子表格中获取数据并包含在动态 html 页面中，请尝试：（根据需要更改 id 和 gid）

<html>
<title>Google Sheets json endpoint V4</title>
<author>Mike Steelson</author>
<style>
table {border-collapse: collapse;}
th,td{border: 1px solid black;}
</style>
<body>
<div id="json">json here</div>
<script>
var id = '_______your id_________';
var gid = '_____your gid_________';
var url = 'https://docs.google.com/spreadsheets/d/'+id+'/gviz/tq?tqx=out:json&tq&gid='+gid;
fetch(url)
  .then(response => response.text())
  .then(data => document.getElementById("json").innerHTML=myItems(data.substring(47).slice(0, -2))  
  );
function myItems(jsonString){
  var json = JSON.parse(jsonString);
  var table = '<table><tr>'
  json.table.cols.forEach(colonne => table += '<th>' + colonne.label + '</th>')
  table += '</tr>'
  json.table.rows.forEach(ligne => {
    table += '<tr>'
    ligne.c.forEach(cellule => {
        try{var valeur = cellule.f ? cellule.f : cellule.v}
        catch(e){var valeur = ''}
        table += '<td>' + valeur + '</td>'
      }
    )
    table += '</tr>'
    }
  )
  table += '</table>'
  return table
}           
</script>
</body></html>

【讨论】：