将特定的 Google 表格数据导入 WebApp答案

【问题标题】：Import Specific Google Sheet Data into WebApp将特定的 Google 表格数据导入 WebApp
【发布时间】：2021-03-11 16:40:42
【问题描述】：

我正在尝试开发一个 WebApp，用户在其中输入他/她的 ID，脚本将在 Google 工作表中搜索该 ID，并从包含该 ID 的工作表中检索相应的数据行。现在脚本正在工作表中搜索 ID 并将特定行作为数组检索。但我想在 WebApp 的表中导入该数据。但找不到任何合理的解决方案。以下是脚本：

function doGet() {
  return HtmlService
      .createTemplateFromFile('Index')
      .evaluate();
}
function FetchData(val) {    //'val' is entered by user in WebApp
  
     var ss        = SpreadsheetApp.getActiveSpreadsheet();
     var formSS    = ss.getSheetByName("Sheet1");
     var lc=formSS.getLastColumn();
     var lr=formSS.getLastRow();
    
  
     for (var i=2;i<=lr;i++)
       
     {
        var UID = formSS.getRange(i, 1).getValue(); 
       
        if (val==UID)     //Searching Google Sheet ID's and User Entered ID 
          
        {
        
      
        var res=formSS.getRange(i, 1, 1,lc).getValues()[0];
        return res;      //contains the data of specific row which we want to put in WebApp Table
          
        }  
       
     }
}

这是 HTML 代码

 <body>
  
   
  <script>
    
    document.getElementById("btn").addEventListener("click",SearchID);
      
    function SearchID() //Searching ID in Google Sheet
      
    {
      var id=document.getElementById("userid").value;
      google.script.run.FetchData(id);
      document.getElementById("userid").value="";
      
   }
          
  </script>
 
 </body> 
</html>

有什么方法可以把这些数据放在 WebApp HTML 页面的表格中。任何指导将不胜感激。这是表格链接：

https://docs.google.com/spreadsheets/d/119wJ3sBY3coGpEo2CHDnW1hPv_WQbgRaQKUwv7HxyFY/edit?usp=sharing

【问题讨论】：

那么您想知道如何在 html 中创建表格？试试看：google.com/…
有一个关于如何做到这一点的指南here。具体来说，您应该使用withSuccessHandler() 方法。
@Cooper 我要求生成表格，但数据来自数组中的 Apps 脚本。
只要看懂格式，数据的来源是什么没有什么区别
是的，当您使用 HTML 页面通信应用程序脚本时会有所不同。

标签： google-sheets html-table webapp2 import-from-excel

【解决方案1】：

正如其他人提到的，您需要根据从服务器接收到的结果构建一个 HTML 表格。 getValues() 返回Object[][]，但在您的情况下，该函数在找到第一个结果时返回，因此您只有一行。

收到该信息后，您的 useData() 函数应使用HTML syntax 创建一个 TABLE 元素，因此您需要添加 <TABLE>、<TR>、<TH> 和 <TD> 等标签。这些标签可以添加到用于构造表格的变量中，在您迭代接收到的数据时附加标签及其内容：

function useData(data) {
  var output = document.getElementById('OutPut');

  // Start building table
  var html = '<table>';

  // Add table header
  html += `<tr>
            <th>Unique ID</th>
            <th>Student name</th>
            <th>Course</th>
            <th>Issued on</th>
            <th>certificate link</th>
          </tr>`;

  // Add table row, assuming there's only one row based on what is being done by Apps Script
  html += '<tr>';
  for (var col = 0; col < data[0].length; col++) {
    html += '<td>' + data[0][col] + '</td>';
  }
  html += '</tr>';

  // Stop building table
  html += '</table>';

  // Add table to existing element
  output.innerHTML = html;
}

【讨论】：