使用 forEach 循环构建 html 表，日期/时间为空 [英] using a forEach loop to build html table and date/time comes through as null

查看：25
本文介绍了使用 forEach 循环构建 html 表，日期/时间为空的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 Google Apps Script 和 Javascript 来构建 WebApp.使用 forEach 循环从 GoogleSheet 中提取数据以构建 HTML 表我有一个日期时间字段作为表中的第 6 列.当表去填充有一个错误 -

<块引用>

未捕获的类型错误:无法读取 null 的属性 'forEach' -

如果我从函数 getTableData 中删除列，则 html 表将在没有日期时间戳的情况下填充.如何在 forEach 循环中获取日期/时间戳?

 document.addEventListener("DOMContentLoaded", function() {//谷歌脚本错误调用获取表数据传递数据.成功时，它将调用 generateTable 传递数据数组中的数据.google.script.run.withSuccessHandler(generateTable).getTableData();//注意上面的函数getTableData是code.gs文件中的一个函数，文件内容见页面底部});函数生成表(数据数组){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 函数 getTableData函数 getTableData() {var ss = SpreadsheetApp.openByUrl(url);var ws = ss.getSheetByName("数据");//下面变量中的 6 是我的 googlesheet 中的第 6 列，是数据/时间戳.这是我抛出错误的地方.如果我将其更改为 5，则它可以工作，但不会在 html 表上获得日期/时间戳var data = ws.getRange(2,1, ws.getLastRow() -1, 6).getValues();Logger.log("数据:" + 数据);返回数据；}

<头><base target="_top"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no"><!--引导链接--><!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPjUGFN9" crossorigin="匿名">--><!--物化链接--><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");?><身体><div class="容器"><div class="row"><div class="input-field col s12"><h1>客人名单数据表</h1><table id="tableId1"><头><tr><th>名字</th><th>Last Name</th><th>Cred 类型</th><th>邮政编码</th><th>估计</th><th>时间</th><!-- 这是 D/T 戳应显示的列--></tr></thead><tbody id="table-body"></tbody>

<!-- 关闭行--><div class="row"><div class="col s12">

<头><tr><th>名字</th><th>Last Name</th><th>Cred 类型</th><th>邮政编码</th><th>估计</th><th>时间</th></tr></thead><tr><td>丹尼尔</td><td></td></tr><tr><td>项目</td><td>两个</td></tr><tr><td>第三项</td></tr></tbody>

<!-- 关闭行-->

<!-- 关闭容器--><!-- 物质化脚本--><script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script><!-- 引导程序脚本--><!-- <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJogin"cross;</脚本><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UrksVoyan"></脚本><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og"cross--><?!= include("table-js");?><页脚><div class="容器"><div class="row" align="center"><a href="<?= ScriptApp.getService().getUrl(); ?>"id="btn" class="waves-effect wave-light btn-small green darken-1">返回主菜单</a>

</页脚></html>

解决方案

Date 对象是 作为服务器和客户端之间的参数非法.使用 JSON 将它们转换为字符串.stringify() 或使用 getDisplayValues() 而不是 getValues()

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>

解决方案

Date objects are illegal as parameters between server and client. Convert them to strings using JSON.stringify() or use getDisplayValues() instead of getValues()

这篇关于使用 forEach 循环构建 html 表，日期/时间为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆