การดึงข้อมูล Google sheet โดยใช้ javascript

Google sheet นอกจากจะช่วยให้เราสร้างเอกสารสเปรดชีตได้อย่างง่ายดายแล้ว ยังมี Google Visualization API ช่วยในการดึงข้อมูลอีกด้วย ในบทความนี้เราจะมาเรียนรู้วิธีดึงข้อมูลจาก Google sheet โดยใช้ google visualization API ด้วยจาวาสคริปต์กัน

1. สร้าง Google spreadsheet

2. คลิกที่ปุ่มแชร์ แก้ไขการเข้าถึง ให้ทุกคนที่มีลิงก์เข้าถึงได้ จากนั้นทำการคัดลอกลิงก์

3. สร้างหน้า HTML ด้วยชื่อ index.html และเพิ่มเนื้อหาด้านล่าง


<html>

  <head>
    <style>
        table {
          font-family: Arial, Helvetica, sans-serif;
          border-collapse: collapse;
          width: 100%;
        } 
        table td, table th {
          border: 1px solid #ddd;
          padding: 8px;
        }
        table tr:nth-child(even){
          background-color: #f2f2f2;
        }
        table tr:hover {
          background-color: #ddd;
        }
        table th {
          padding-top: 12px;
          padding-bottom: 12px;
          text-align: left;
          background-color: #ff7b00;
          color: white;
        }
     </style>
  </head> 
  <body>
    <h1 style="text-align: center;">User Data</h1>
    <table class="output"></table>
    <script src="spreadsheet.js"></script>
  </body>
</html>

4. สร้างไฟล์จาวาสคริปต์ด้วยชื่อ spreadsheet.js ในไดเร็กทอรีปัจจุบัน และเพิ่มเนื้อหาด้านล่าง

const sheetId = 'xxxxxxx';  //Change xxxxxxx to your ID sheet.
const base = 'https://docs.google.com/spreadsheets/d/${sheetId}/gviz/tq?';
const sheetName = 'yyyyyyy'; //Change yyyyyyy to the name of your spreadsheet.
const query = encodeURIComponent('Select *')
const url = '${base}&sheet=${sheetName}&tq=${query}'
const data = []
document.addEventListener('DOMContentLoaded', init)
const output = document.querySelector('.output')
function init() {
    fetch(url)
        .then(res => res.text())
        .then(rep => {
            //Remove additional text and extract only JSON:
            const jsonData = JSON.parse(rep.substring(47).slice(0, -2));
            console.log(rep)
 
            const colz = [];
            const tr = document.createElement('tr');
            //Extract column labels
            jsonData.table.cols.forEach((heading) => {
                if (heading.label) {
                    let column = heading.label;
                    colz.push(column);
                    const th = document.createElement('th');
                    th.innerText = column;
                    tr.appendChild(th);
                }
            })
            output.appendChild(tr);
 
            //extract row data:
            jsonData.table.rows.forEach((rowData) => {
                const row = {};
                colz.forEach((ele, ind) => {
                    row[ele] = (rowData.c[ind] != null) ? rowData.c[ind].v : '';
                })
                data.push(row);
            })
            processRows(data);
        })
}
  
function processRows(json) {
    json.forEach((row) => {
 
        const tr = document.createElement('tr');
        const keys = Object.keys(row);
     
        
    keys.forEach((key) => {
            const td = document.createElement('td');
            td.textContent = row[key];
            tr.appendChild(td);
        })
    
        output.appendChild(tr);
    })
}

5. อัพโหลดไฟล์ทั้งหมดขึ้นโฮสต์ และเปิดไฟล์ index.html บนเบราว์เซอร์ ดังภาพ