无法将Google Apps Script的Alunos()返回数组渲染为HTML表格如何解决

核心故障点 #

• 代码执行顺序错误：调用criarTabela渲染表格时，conteudo变量还未完成赋值，此时值为undefined无法渲染
• 异步API使用错误：google.script.run是异步接口，无法直接将执行结果赋值给变量，返回数据只会传递给withSuccessHandler绑定的回调函数
• 挂载逻辑缺失：原代码中criarTabela仅生成表格DOM元素，没有将元素挂载到页面的逻辑，就算接口返回数据也不会显示
• 语法错误：var conteudo = new Array google.script.run...是非法语法，无实际作用

修正后代码 #

function criarTabela(conteudo) {
  var tabela = document.createElement("table")
  // 可选：添加边框方便查看表格效果
  tabela.border = "1"
  var thead = document.createElement("thead")
  var tbody = document.createElement("tbody")
  var thd = function(i){return (i==0)?"th":"td";}
  for (var i=0;i<conteudo.length;i++) {
    var tr = document.createElement("tr")
    for(var o=0;o<conteudo[i].length;o++){
      var t = document.createElement(thd(i))
      var texto=document.createTextNode(conteudo[i][o])
      t.appendChild(texto)
      tr.appendChild(t)
    }
    i==0 ? thead.appendChild(tr) : tbody.appendChild(tr)
  }
  tabela.appendChild(thead)
  tabela.appendChild(tbody)
  // 直接将生成的表格挂载到页面容器
  document.getElementById("consulta").appendChild(tabela)
}

// 调用异步接口，数据返回后自动触发回调渲染表格
google.script.run.withSuccessHandler(criarTabela).Alunos()

验证说明 #

只要页面中存在id为consulta的DOM容器，接口Alunos返回二维数组后，就会自动渲染为带表头的表格。

内容的提问来源于stack exchange，提问作者César Eta Cardoso de Almeida