将特定 Google Sheet 数据导入 WebApp

Question

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

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 页面的 table 中。任何指导将不胜感激。这是 sheet Link:

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

Answer 1

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

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

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;
}

将特定 Google Sheet 数据导入 WebApp

Import Specific Google Sheet Data into WebApp

google-sheets

html-table

webapp2

import-from-excel