I want to create a dynamic table on a web page using the data output to a google spreadsheet. Below is the screen currently being created.

Also, the spreadsheet used as the data source is the image below.
Taro on the page that describes the A32 element of this image/I would like to reflect it in the ~ part of Spushi here. The A32 element is deployed as a web application with the GAS doGet function.

Due to the application configuration, the html file is not created by the script editor of the spreadsheet, it is a local file.
I heard that there is no way to pass the spreadsheet value directly to an external html file, so I'm deploying it as an app. By accessing the url passed after deployment, I got the following results:

(Addition) Problem/Error message

The error came out as below. If i specify the part of ~ here on the table with id = "dt", this result will be returned and the target processing cannot be performed. However, since the test (target) part appears like the image when id = "target" is specified, I am thinking about how to specify it for the td tag.

Uncaught (in promise) TypeError: Cannot set property'textContent' of null
    at table.js: 8

Source code
<! DOCTYPE html><html><head><meta charset = "utf-8"><title>test</title><meta name = "viewport" content = "width = device-width, initial-scale = 1" /><link rel = "stylesheet" href = "page.css"><link rel = "stylesheet" href = "reset.min.css"><link rel = "stylesheet" href = "style.css"><script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><link href = "https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel = "stylesheet"><script type = "text/javascript" src = "https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script></head><body><header>    ~~ Abbreviation ~~
  </header>         Test (id = "target")        Patient data</​​h1>  <table>    <thead>      <tr>        <th>Name</th>        <th>Last updated</th>        <th>Status</th>      </tr>    </header>    <tbody>      <tr>        <td>Taro</td>        <td>I want to insert the spreadsheet value here</td>        <td>in</td></tr>      <tr>        <td>Jiro</td>        <td></td>        <td>out</td>      </tr>      <tr>        <td>Saburo</td>        <td></td>        <td>in</td>      </tr>    </tbody>  </table>  <script src = "table.js"></script>  <script type = "text/javascript">      var table = new Tabulator ("# student-table", {
          layout: "fitColumns",
          movableColumns: true,
          columns: [
          {title: "name", field: "name"},

          {title: "Last updated", field: "daytime"},

          {title: "status", field: "status"},



    </script>    <footer>    ~~ Abbreviation ~~
'use strict';
      const url = "GAS API URL"
      fetch (url, {
        method: "GET",
      }). then (response =>response.text ())
      .then (text =>{
        console.log (text);
        Success when // dt is set as target (test (target) was rewritten on October 06 _17: 08)
        document.getElementById ('id where I want to pass') .textContent = text;});
var SHEET_NAME = "Sheet 1";
function getValue () {
  var ss = SpreadsheetApp.openById (SpreadsheetApp.getActiveSpreadsheet (). GetId ());
  var sheet = ss.getSheetByName (SHEET_NAME);
  var lastrow = sheet.getLastRow ()-1;
  var box = [];
// return sheet.getRange (lastrow, 1,1,1) .getValue ();
  var value = sheet.getRange (lastrow, 1,1,1) .getValue ();
  return JSON.stringify ([{datetime: value}]);
function doGet (e) {
  return ContentService.createTextOutput (getValue ()). setMimeType (ContentService.MimeType.TEXT);

From the top, html, javascript, GAS code. Some parts are omitted.
The id called target in the main-wrapper is a test when thinking that data can be referenced outside the table. There is also a comment, but in that case I was able to refer to it.
The error table.js is the above javascript.


I wondered if it was possible to add the id attribute to the td tag because the textContent was created for the above error message and the id outside the table, but as far as I checked, it seems to be possible.
I've been wondering if Tabulator can do this, but I couldn't solve it because few people were doing the same thing.

I would like to know how to improve it so that it works as intended. Just guessing that this is the case is very helpful.
Since I am a beginner, I would like to explain the situation poorly. Thank you.

(Addition 20201113) Result for each pattern of passed id

In response to your indication, I will add the following. Please note that only the images will be long.
There is no rewriting of html in the two patterns from the top, only the argument of getElementById of table.js is changed.

In case of getElementById ("target") of script
In this case, it works as expected. There are no errors on the console.

In case of getElementById ("dt") of script
As you can see in the image below, the part of ... has not changed and the same error has appeared on the console.

When two same ids called status are attached inside and outside the html table and passed as an argument
In this case, the value was reflected only in the id outside the table, and there was no error on the console.

      Test (id = "target")        Patient data</​​h1>      // Here and
    <table>    <thead>      <tr>        <th>Name</th>        <th>Last updated</th>        <th>Status</th>// Here
        </tr>    </header>    <tbody>

From the above, is it a scope problem? I think, but I can't solve it at all ...
Please give us your opinion.

  • Answer # 1

    There are multiple.
    You cannot specify the same ID.

    Uncaught (in promise) TypeError: Cannot set property'textContent' of null
        at table.js: 8

    This error isdocument.getElementById ('dt')This is an error that occurs when the element cannot be obtained with.

    as you said,document.getElementById ('target')soIf is rewritten, it seems that you can get it without any problem. (I was able to run it with the HTML and JS provided)
    Again, please check which script was successful and which script was the problem.

Related articles