使用 forEach 循环构建 html table 并且 date/time 以 null 形式出现

Question

我正在使用 Google Apps 脚本和 Javascript 构建 WebApp。使用 forEach 循环从 GoogleSheet 中提取数据以构建 HTML table 我的 table 中的第 6 列有一个日期时间字段。当 table 去填充时出现错误 -

Uncaught TypeError: Cannot read property 'forEach' of null -

如果我从函数 getTableData 中删除列，html table 将在没有日期时间戳的情况下填充。如何让 date/time 标记在 forEach 循环中通过？

 document.addEventListener("DOMContentLoaded", function() {
 //The google script ill call get table data passing data. on success it will call the generateTable passing the data from data array.
   google.script.run.withSuccessHandler(generateTable).getTableData();
//note the above function getTableData is a function in the code.gs file see bottom of page for the contents of file
    
 });
 
 function generateTable(dataArray) {

 var tbody = document.getElementById("table-body");
    
    dataArray.forEach(function(r) {
    
    var row = document.createElement("tr");
    var col1= document.createElement("td");
    col1.textContent = r[0];
    var col2= document.createElement("td");
    col2.textContent = r[1];
    var col3= document.createElement("td");
    col3.textContent = r[2];
    var col4= document.createElement("td");
    col4.textContent = r[3];
    var col5= document.createElement("td");
    col5.textContent = r[4];
    var col6= document.createElement("td");
    col6.textContent = r[5];
    tbody.appendChild(col1);
    tbody.appendChild(col2);
    tbody.appendChild(col3);
    tbody.appendChild(col4);
    tbody.appendChild(col5);
    tbody.appendChild(col6);
    tbody.appendChild(row);
    });
 
 }
 
 //code.gs function getTableData
 function getTableData() {

     var ss = SpreadsheetApp.openByUrl(url);
     var ws = ss.getSheetByName("Data");
     // the 6 in the below variable is the 6th column in my googlesheet and is a data/time stamp. this is where I am throwing the error. if i change it to 5 it works, but does not get the date/time stamp on the html table
     var data = ws.getRange(2,1, ws.getLastRow() -1, 6).getValues();
     Logger.log("data : " + data);
     return data;
}

<!DOCTYPE html>
<html>

<head>
    <base target="_top">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!--Bootstrap link -->
    <!--   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> -->
    <!--materialize link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <?!= include("pageCSS"); ?>
</head>

<body>
   
    <div class="container">
       <div class="row">
            <div class="input-field col s12">
               <h1>Guest List Data Table</h1>
       <table id="tableId1">
        <thead>
          <tr>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Cred Type</th>
              <th>Zip Code</th>
              <th>Estimate</th>   
              <th>Time</th> <!-- this is the column where D/T stamp should show -->
          </tr>
        </thead>
        <tbody id="table-body">
          
          
        </tbody>
        
      </table>
            </div>
        </div>
        <!-- CLOSE ROW -->
      <div class="row">
       <div class="col s12">
        <table id="tableId" border=1>
         <thead>
          <tr>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Cred Type</th>
              <th>Zip Code</th>
              <th>Estimate</th>   
              <th>Time</th>
          </tr>
        </thead>
        <tbody>
            <tr>
            <td>DANIELLE</td>
             <td></td>
            </tr>
            <tr>
            <td>Item </td>
            <td>two</td>
            </tr>
            <tr><td>Item three</td></tr>
          </tbody>
        </table>
       </div>
      </div>
      <!-- CLOSE ROW -->
    </div>
    <!-- CLOSE CONTAINER -->

    <!-- SCRIPT FOR MATERIALIZE -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <!-- SCRIPTS FOR BOOTSTRAP -->
    <!--  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> -->
    <?!= include("table-js"); ?>
</body>
<footer>
<div class="container">
        <div class="row" align="center">
            <a href="<?= ScriptApp.getService().getUrl(); ?>" id="btn" class="waves-effect waves-light btn-small green darken-1">Back to Main Menu</a>
        </div>
    </div>
</footer>
</html>

Answer 1

Date 对象是 illegal as parameters between server and client. Convert them to strings using JSON.stringify() or use getDisplayValues() 而不是 getValues()

使用 forEach 循环构建 html table 并且 date/time 以 null 形式出现

using a forEach loop to build html table and date/time comes through as null

javascript

client-server

web-applications

google-sheets

google-apps-script