Để lấy dữ liệu từ Google Sheets và hiển thị trên trang Blogspot chuyên nghieepk kèm theo bộ lọc hoàn chỉnh, bạn có thể thử sử dụng Google Sheets API kết hợp với Google Apps Script. Dưới đây là một cách tiếp cận khác có thể giúp bạn:
Bước 1: Tạo và chia sẻ Google Sheets
Tạo Google Sheets với dữ liệu bạn muốn hiển thị.
Chia sẻ bảng tính: Chọn "Bất kỳ ai có liên kết" và đặt quyền là "Xem".
Bước 2: Tạo Google Apps Script
Mở Google Sheets của bạn.
Chọn "Extensions" > "Apps Script".
Dán mã dưới đây vào trình chỉnh sửa:
Lưu và triển khai dự án:
function doGet(e) {
var sheet = SpreadsheetApp.openById('YOUR_SHEET_ID').getSheetByName('Sheet1');
var range = sheet.getDataRange();
var values = range.getValues();
var output = ContentService.createTextOutput();
output.setMimeType(ContentService.MimeType.JSON);
var data = [];
for (var i = 1; i < values.length; i++) {
var row = {};
for (var j = 0; j < values[0].length; j++) {
row[values[0][j]] = values[i][j];
}
data.push(row);
}
output.setContent(JSON.stringify(data));
return output;
}
Chọn "Deploy" > "New deployment".
Đặt loại triển khai là "Web app".
Đặt quyền truy cập là "Anyone".
Bước 3: Lấy URL từ triển khai
Sau khi triển khai, bạn sẽ nhận được một URL web app, ví dụ: https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec.
Bước 4: Thêm mã JavaScript vào Blogger
Vào Blogger, thêm tiện ích "HTML/Javascript":
Dán mã sau vào tiện ích:
<script>
async function fetchData(filterValue) {
const response = await fetch('https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec');
const data = await response.json();
displayData(data, filterValue);
}
function displayData(data, filterValue) {
let html = '<table border="1">';
data.forEach(item => {
if (item['Tên Cột 1'] === filterValue) { // Thay 'Tên Cột 1' bằng tên cột bạn muốn lọc
html += '<tr>';
html += `<td>${item['Tên Cột 1']}</td>`;
html += `<td>${item['Tên Cột 2']}</td>`;
html += '</tr>';
}
});
html += '</table>';
document.getElementById('data-container').innerHTML = html;
}
document.addEventListener('DOMContentLoaded', () => {
const filterElement = document.getElementById('filter-id'); // Thay 'filter-id' bằng ID của phần tử chứa giá trị lọc
const filterValue = filterElement ? filterElement.innerText : '';
fetchData(filterValue);
});
</script>
Lưu và triển khai dự án:
Chọn "Deploy" > "New deployment".
Đặt loại triển khai là "Web app".
Đặt quyền truy cập là "Anyone".
Bước 3: Lấy URL từ triển khai
Sau khi triển khai, bạn sẽ nhận được một URL web app, ví dụ: https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec.
Bước 4: Thêm mã JavaScript vào Blogger
Vào Blogger, thêm tiện ích "HTML/Javascript":
Dán mã sau vào tiện ích:
Bước 2: Cập nhật HTML để chứa dữ liệu
Thêm đoạn HTML này vào nơi bạn muốn hiển thị dữ liệu:
<div id="filter-id">Giá trị mặc định</div> <!-- Phần tử này chứa giá trị lọc -->
<div id="data-container"></div>
Kết luận
Với mã cập nhật này, khi trang tải, JavaScript sẽ lấy giá trị từ phần tử HTML có id="filter-id" và sử dụng giá trị này để lọc dữ liệu từ Google Sheets. Đảm bảo bạn thay thế YOUR_SCRIPT_ID và 'Tên Cột 1' bằng giá trị phù hợp với bảng Google Sheets của bạn.
Đăng nhận xét