https://docs.google.com/spreadsheets/d/17KQ_SvsZPw80lfg0UYN2zegGXq4LvKOjoBKI6GVG1hY/edit?gid=0#gid=0
Code.gs
function doGet() {
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
var data = sheet.getDataRange().getValues();
var jsonData = {};
// Assume first row is headers
var headers = data[0];
jsonData['data'] = [];
// Start from row 1 to skip headers
for(var i = 1; i < data.length; i++) {
var row = {};
for(var j = 0; j < headers.length; j++) {
row[headers[j]] = data[i][j];
}
jsonData['data'].push(row);
}
return ContentService.createTextOutput(JSON.stringify(jsonData))
.setMimeType(ContentService.MimeType.JSON);
}
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Data from Google Sheets</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.3.6/css/dataTables.dataTables.css"/>
</head>
<body>
<h1> Pizza Price List</h1>
<table id="pizzaPrice" class="display" style="width: 100%">
<thead>
<tr>
<th>Pizza Name</th>
<th>Type</th>
<th>Size</th>
<th>Price</th>
</tr>
</thead>
</table>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/2.3.6/js/dataTables.js"></script>
<script>
new DataTable('#pizzaPrice', {
ajax: 'https://script.google.com/macros/s/AKfycbzGvZE56f6AbwO1q3TK4vsuxqMnRb9hCDVHLGbWXvk-RcTTtHFnAH2c8lGC3GP_MQVxrw/exec',
columns: [
{ data: 'Pizza Name' },
{ data: 'Type' },
{ data: 'Size' },
{ data: 'Price' },
]
});
</script>
</body>
</html>
<table id="pizzaPrice" class="display" style="width: 100%">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/2.3.6/js/dataTables.js"></script>
<script>
new DataTable('#pizzaPrice', {
ajax: 'https://script.google.com/macros/s/AKfycbzGvZE56f6AbwO1q3TK4vsuxqMnRb9hCDVHLGbWXvk-RcTTtHFnAH2c8lGC3GP_MQVxrw/exec',
columns: [
{ data: 'Pizza Name' },
{ data: 'Type' },
{ data: 'Size' },
{ data: 'Price' },
]
});
</script>
Tidak ada komentar:
Posting Komentar