JS / 網頁取得自訂API資料，搜尋結果、更換CSS樣式

JS / 網頁取得自訂API資料，搜尋結果、更換CSS樣式

Post Views: 430

最近想嘗試模仿國民小學及國民中學學生學習扶助資源平臺 PRIORI裡的入班輔導人員名單呈現方式

我自己土炮的流程大致可以分為

Google Apps Script 撰寫與發佈成網頁程式

在網頁以fetch方法取得資料

使用Jquery抓取資料、修改CSS樣式

1.Google Apps Script 撰寫與發佈成網頁程式

處理的部分是接收呼叫之後，將資料以字串型態傳出

(當然也可以利用POST 或者 GET方法傳遞參數，進行資料處理再回傳，可以參考 Gg / 在wordpress結合Google Apps Script建立查詢頁面)

所以程式理會有一個部分是處理要傳出的資料內容

由於想直接傳出帶有html標籤的內容，因此透過字串連結的方式來產生html內容

這樣也可以在嵌入的網頁中設計對應的CSS樣式

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
function doGet(e) {
    //取得資料
    var sId = "********************************************";
    var sheetAll = SpreadsheetApp.openById(sId);
    var sheetOne = sheetAll.getSheets()[0];
    //var dataAll = sheetOne.getDataRange().getValues();
    //Logger.log(dataAll.length);

    var lastRow = sheetOne.getLastRow();
    var lastCum = sheetOne.getLastColumn();
    console.log(lastRow, lastCum)

    //轉換成 Json格式的陣列
    var keys = sheetOne.getRange(1, 1, 1, lastCum).getValues()[0];
    console.log(keys);
    var values = sheetOne.getRange(2, 1, lastRow - 1, lastCum).getValues();

    var newData = '<div class="table  display" id="coach_table"><div class="table-thead" ><div class="table-tr"><div class="table-th">coach_table國教署核定文號</div><div class="table-th">姓名</div><div class="table-th">服務學校</div><div class="table-th">輔導階段</div><div class="table-th">授課科目</div></div></div><div class="table-tbody">';
    console.log(values.length);
    values.forEach((value) => {
        //console.log(typeof value);
        newData += '<div class="table-tr gradeC">';

        value.forEach((valueOne) => {
            newData += '<div class="table-td">' + valueOne + '</div>';
        })
        newData += '</div>';

    });

    newData += '</div></div>';

    console.log(newData);
    //轉換成 Json字串
    //var dataExportFormat = JSON.stringify(newData);

    //以物件方式送出
    //return ContentService.createTextOutput(dataExportFormat).setMimeType(ContentService.MimeType.JSON);

    return ContentService.createTextOutput(newData);

}

 

2.在網頁以fetch方法取得資料

之前幾篇文章用了不同的方式

1)Javescript原生的XMLHttpRequest()

2)Jquery的Ajax()

現在改用比較新的、同樣也是Javescript原生的fetch()

這個方法比較特殊的地方是取得資料的方式

由於是要在網頁開啟之後就要發出請求

所以包在 $(document).ready(function() {})

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
 
fetch(
          //接收回傳的json檔案
          "https://script.google.com/macros/s/************************************************************************/exec", {}
        )
        .then((response) => {
          if (!response.ok) {
            throw new Error(response.statusText);
          }
          // 這裡會得到一個 ReadableStream 的物件
          //console.log(response.body); //object ReadableStream
          // 可以透過 blob(), json(), text() 轉成可用的資訊
          return response.text(); //fetch promise 取值的方法
        })
        .then((html) => {
          // do something with the text response
          console.log(html);
          $("#tableData").append(html);
        });

 

3.使用Jquery抓取資料、修改CSS樣式

這裡是用Jquery的 click事件

對應當按下搜尋的按鈕時觸發後續的事件

如果搜尋字串當中有符合的內容就寫到變數之中並且改變CSS樣式

搜尋的流程為：

先取得 div id為coach_table裡的所有 div class為table-td的元素

利用each()逐一比對

我設定比對的是「姓名」，table-td排序是1、6、11…

都是除以5之後餘數為1的數字

所以先用判斷式找出來，再來比對table-td的text()與文字框$(‘#searchBt’)的val()，兩者的內容是否相同

如果相同就存入陣列 n

之後再利用這個陣列，如果有資料就從原有的div 表格  coach_table中抓取相對應的序號table-td

存入新的div 表格  coach_result

然後透過CSS樣式的設定隱藏原有的div 表格  coach_table

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
$('#searchBt').on('click', function() {
        var n = [];
        var member = $.trim($('#member').val());
        if (member != "") {
          //console.log(member);
          $('#coach_table .table-td').each(function(index) {
            //console.log($(this).text());
            /* 
            if ($(this).text() == member) {
              console.log(index);
              n.push((index - 1) / 5);
            }
			*/
            //console.log(index%5);
            if (index % 5 == 1) {
              var nameTable = $(this).text();
              var nameStr = member;
              //console.log(nameStr.length);
              var searchResult = nameTable.search(nameStr);
              console.log(searchResult);
              if (searchResult >= 0) {
                //console.log(index);
                n.push((index - 1) / 5);
              }
            }
          })
          console.log(n);
          //console.log(n.length);

          if (n.length > 0) {
            $('#member').val("");
            //
            var html = "";
            for (var i = 0; i < n.length; i++) {
              var trHtml = $('.gradeC').eq(n[i]).html();
              html += '<div class="table-tr">' + trHtml + "</div>";
            }
            console.log(html);
            $('#coach_table').addClass('hideTable');
            $('#coach_result .table-tbody').html(html);
            $('#coach_result').removeClass('hideTable');
            $('#coach_result .table-tbody .table-tr').addClass('color');
          } else {
            $('#member').val("");
            //console.log("n=0");
          }
        } else {
          
          if ($('#coach_table').hasClass('hideTable')) {
            $('#coach_table').removeClass('hideTable');
            $('#coach_result .table-tbody').html("");
            $('#coach_result').addClass('hideTable');
            $('#coach_result .table-tbody .table-tr').removeClass('color');
          } else {
            console.log("error");
            //alert("error");
          }
          //history.go(0);
        }
      })

 

最終結果

See the Pen javascript的Fetch事件_2 by 莊幸諺 (@trico109748007) on CodePen.

Tags: