https://docs.google.com/spreadsheets/d/1Lf3xOS8Pt8ybtGmTgVeHwAY99Jg5ABI68CJgdYP8iaE/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);
}
Index4.html
<!DOCTYPE html>
<html>
<head>
<title>Data From Google Sheet</title>
<link rel="stylesheet" type="text/CSS" href="https://cdn.datatables.net/2.3.6/css/dataTables.dataTables.css"/>
</head>
<body>
<h1>Daftar Pizza</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.googleusercontent.com/macros/echo?user_content_key=AehSKLiFME6H4wrz0mrCDZkq8TXcPUyo3K_p85_MT-O9XtbBFVoUEWr7uA6TnCuxooeg8RsHXb_Zbv--Bhu59ubVQ72CD9DbU1L71_yZyk3n_zXOSu4hQHkCUuav5D7nK56V0tLR-TMcBlw6JcHkeZYiJKIvWHUZx5yGDjAH3lPVoB3byYQIx9eiCr-knPtwumHfskFAe9Z2b9vcFKCLUIldnq4jhkUJMQgNCsGETM56r0I_MKYWm6DtzXSR1vrXBWCn3I9SJpJBEBZiircCcz0RXWz4tIIoyXMkDMx3Z-1F&lib=MHsjqox2_0cNXVD0yt1R7UQLEkTVLS6aH',
columns: [
{ data: 'Pizza Name' },
{ data: 'Type' },
{ data: 'Size' },
{ data: 'Price' },
]
});
</script>
</body>
</html>
Data
Apps Script
Tidak ada komentar:
Posting Komentar