问题
I am using Google Apps Script and Javascript to build a WebApp. Using a forEach loop to pull data from the GoogleSheet to build the HTML table I have a date time field as the 6th column in my table. When the table goes to populate there is an error -
Uncaught TypeError: Cannot read property 'forEach' of null -
If i drop the column from the function getTableData the html table will populate without the date time stamp. How do I get the date/time stamp to come through in the forEach loop?
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>回答1:
Date objects are illegal as parameters between server and client. Convert them to strings using JSON.stringify() or use getDisplayValues() instead of getValues()
来源：https://stackoverflow.com/questions/61803459/using-a-foreach-loop-to-build-html-table-and-date-time-comes-through-as-null