以Google Sheet做為資料來源

來到杜賽道夫的第二個禮拜，已經開始工作，工作上適應算是滿好的，上班第一天把寫code的環境建立起來，再來就可以開始接收不同的任務了。

上班的第一個任務是將修改的手冊PDF檔上傳到網站，目前官網是以單純HTML製作，要"更新"手冊這任務當然就只有徒法煉鋼的方式去修改，複雜的地方在於網站有七個語言版本，這部分有點繁雜而已。

但這篇主要要講的是下一個任務。官網上有個讓世界各地的部落客申請報名為產品測試者的頁面，目前方式是下載PDF檔後填寫完再寄回，處理的人因此會收到很多信，透過信再去篩選適當人選。

關於簡化這部分的流程有兩個方式
1.  徒法煉鋼寫一個報名系統
2.  使用Google form

第一個方法行不通因為網站的伺服器只支援單純HTML頁面，因此以第二個方法去做。

使用Google form

1.  建立Google Doc  (這一步應該不用多加解釋) 
透過Google form填寫完後會產生一個Google Sheet

2.  將Google Sheet轉換為json格式
一般點兩下Google Sheet網址會為
https://docs.google.com/spreadsheets/d/1jNR1iJZvWQuP1fRrkKc6BmBQYXqRREhtQCi2LUw7bZo/edit#gid=0

https://spreadsheets.google.com/feeds/list/將紅色部分填入這裡/default/public/values?alt=json

記得將Sheet  Publish 到網路上  否則會得到這訊息 
 "We're sorry. This document is not published."

Publish方式:
打開Google Sheet -> File -> Publish to the web

3. 利用JavaScript Json將資料讀到網頁中

$.ajax({

    url: 填入轉換Json格式的網址,
    type: "GET",
    dataType: "json",
    success: function (json) {
        // 呈現表格 col 標題文字
        var firstRows = json.feed.entry[0];
        var rowsRegex = /gsx\$/;
        var fieldTitle;
        $.each(firstRows, function (i, data) {
            if (rowsRegex.test(i)) {
                fieldTitle += '' + i.replace("gsx$", "") + '

';
            }
        });
        $("table thead").html("");
        $("table thead").append(fieldTitle);

        // 呈現表格 rows 資料
        var rows = json.feed.entry;
        $("table tbody").html("");
        $.each(rows, function (i, data) {
            var field = '';
            $.each(data, function (j, jdata) {
                if (rowsRegex.test(j)) {
                    field += "" + jdata.$t + "

";
                }
            });
            $("table tbody").append("" + field + "");
        });
    },
    //錯誤判斷
    error: function () {
        console.log("資料讀取錯誤，請檢查 spreedsheet 有無 public");
        alert("資料讀取錯誤");
    }
}); 

參考力力皆辛苦部落格中，在透過AJAX呼叫並取得Json資料前，其實有段是利用原始的Google Sheet網址來計算出轉換成Json格式的網址，但如果依照上面步驟設定，就可以省略該行Code

另外透過網址將sheet轉成Json格式時候，有發生轉不過去，後來發現要把sheet中醫些不必要欄位刪除就正常了


參考資料:
力力皆辛苦blog
Meet See