Day 17 — To Do List (4) 让网页呈现试算表资料

经过前面两天稍微了解了 HTML Service 後，今天我们要来开始实作我们的 To Do List 了！

今天我们分成三个部分进行：

  1. 建立假资料。

  2. 完成 GAS 程序设定。

  3. 完成 HTML。

就让我们开始吧！

首先我们开启我们尘封已久的 To Do List DB 试算表。

真的是许久不见了，空白了那麽久就让我们来宠信你吧（金变态）。

开玩笑的！

我们首先先定义一下我们的资料栏位，我分为几个部分 - 登录时间、Key、事件 event、是否已经完成 isDone：

接下来我们来新增一些假资料：

一样，金变态。

这样就好了，没错，就是这麽简单！

欧对了，你会发现 isDone 栏位我是使用 Check Box ，因为这样在 Google Apps Script 中比较好处理。

接下来来到第二部分：完成 GAS 程序。

今天的部分因为我只是想要呈现资料，因此我就写了两个函式来处理：

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

function showToDoListData() {
  const datas = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0].getDataRange().getValues();
  return datas.slice(1);
}

跟 Day 16 一样，第一个 doGet 负责处理 HTTP 的 GET 请求。

而第二个 showToDoListData 则是把资料吐给前端。

这样就完成第二部分啦！

接下来是第三部分，其实才是最麻烦的地方…

因为画面要呈现，所以势必要看看如何呈现。

但是因为这系列文章的重点不是在前端网页，所以我决定用最丑的方式书写就好…

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function showData(datas) {
        const tbody = document.querySelector('#items');
        datasFormat = []
        datas.forEach(data => {
          datasFormat.push([data[2], data[3]])
        });
        datasFormat.forEach((data, index) => {
          const tr = document.createElement('tr');
          const count = document.createElement('td');
          count.innerText = index;
          tr.appendChild(count)
          data.forEach(item => {
            const td = document.createElement('td');
            td.innerText = item;
            tr.appendChild(td)
          });
          tbody.appendChild(tr);
        });
      }

      google.script.run.withSuccessHandler(showData)
          .showToDoListData();
    </script>
  </head>
  <body>
    <div id="app">
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>事情</th>
            <th>是否完成</th>
          </tr>
        </thead>
        <tbody id="items"></tbody>
      </table>
    </div>
  </body>
</html>

完成了三步骤，我们来重新部署一下。

部署过程中一样会要权限允许，就稍微按一下吧！

过程我就不 ＰＯ 了！

然後我们来看一下结果：

耶？东西怎麽都没有跑出来？

看一下 console ：

哇哩咧！？怎麽会是传 null ？

这边我修修改改修修改改，差点是以为我早上起床姿势不对（？）才导致的 Bug 时，我又瞥到了可爱的 Docs ：

简单来说，不能直接传 Array 啦！我们只能传 Number , Boolean , String 或是 null 。

所以在 .gs 的部分必须要来处理一下：


function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

function showToDoListData() {
  const datas = SpreadsheetApp.getActiveSpreadsheet().getSheets()[0].getDataRange().getValues();
  return JSON.stringify(datas.slice(1));
}

这边我把它利用 JSON.stringify 转为字串传出。

而 .html 的部分则是另外把他转回 Array 型态：

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script>
      function showData(datas) {
        const tbody = document.querySelector('#items');
        datasFormat = []
        JSON.parse(datas).forEach(data => {
          datasFormat.push([data[2], data[3]])
        });
        datasFormat.forEach((data, index) => {
          const tr = document.createElement('tr');
          const count = document.createElement('td');
          count.innerText = index;
          tr.appendChild(count)
          data.forEach(item => {
            const td = document.createElement('td');
            td.innerText = item;
            tr.appendChild(td)
          });
          tbody.appendChild(tr);
        });
      }

      google.script.run.withSuccessHandler(showData)
          .showToDoListData();
    </script>
  </head>
  <body>
    <div id="app">
      <table>
        <thead>
          <tr>
            <th>编号</th>
            <th>事情</th>
            <th>是否完成</th>
          </tr>
        </thead>
        <tbody id="items"></tbody>
      </table>
    </div>
  </body>
</html>

然後我们重新部署後来看一下结果吧！

ＯＫ～版型虽然难看，但是完成了！！

今天就到这里罗！

也是平安的结束了一天呢！

今日作业：

把版型调整一下吧！

就到这里罗！

明天见！

关於兔兔们：

我：今天周六，但是也莫名其妙的忙到了现在…到底我在忙什麽啊…？

<<:  [D17] ML机器学习（入门）

>>:  [Day17] 团队管理：Check-in & Check-out

【Day 30】实作 - 如何在 AWS Quicksight 设定告警以及结语

昨天我们提到 AWS CloudWatch Alarms，今天我们就来介绍 AWS QuickSig...

[Day 06] 监控、维护 — 自己开一家徵信社吧!

大家好，在开始之前先祝大家中秋节快乐~~ 监控 (Monitor) 最常见的监控方法为仪表板 (Da...

# Day7--物件兄弟党：类别与结构

就以基本面来说，类别跟结构都会有一些共同的东西： 属性(property)：用於储存值 方法(met...

请告诉我你的市场

企业的单一充分且必要条件是什麽？ 是资金、投资人吗？是技术、专利吗？ 还是团队、热情、理念、梦想呢...

#27-微互动折线图动态！就是要比较才看得出结果啊 (D3.js)

前两天都是展现Data而已，今天来试做看看互动＆换资料的动态！ 折线图也是满常见的样式， 这次以非洲...