我正在尝试创建一个简单的网络应用程序来跟踪我每天消耗的食物，但无法完成在网络应用程序上显示谷歌电子表格中的项目的简单任务。
在 code.js 服务器端，一切似乎都运行良好，因为 return 语句变量包含所需的数组数据。
另一方面，在index.html 客户端，由于我找不到原因而传递了一个空值。
有人遇到过这种现象吗？
我使用了带有日志的 try-catch 并使用执行日志来了解我当前对问题的分析。 code.js和index.html的完整代码如下：
索引.html
<!DOCTYPE html>
<html dir="rtl">
<head>
<title>Food Diary</title>
<!-- Add some CSS for styling -->
<!-- CSS Styling for Success Message -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Existing styles */
/* Responsive styles for mobile devices */
@media only screen and (max-width: 600px) {
body {
font-size: 32px; /* Larger font size for readability */
}
h1 {
font-size: 48px; /* Adjust heading size */
}
form {
width: 90%; /* Use percentage for width */
margin: auto; /* Center the form */
}
button {
padding: 20px 40px; /* Larger buttons for touch screens */
}
/* Other responsive adjustments */
}
</style>
</head>
<body>
<h1>Food Tracker</h1>
<form id="foodForm">
<!-- Combo-box for Food/Drink Items -->
<select name="foodItem" required>
<option value="">Choose from list</option>
</select>
<!-- Quantity Input -->
<input type="number" name="quantity" placeholder="quantity" required>
<!-- Submission Button -->
<button type="button" onclick="submitEntry()">Submit</button>
</form>
<!-- Container for Success Messages -->
<div id="messageContainer"></div>
<div id="allEntries">
<h3>All Entries</h3>
<!-- Records will be listed here -->
</div>
<div id="todaysEntries">
<h3>Today's Entries</h3>
<!-- Entries will be listed here -->
</div>
<script>
function handleError(error) {
console.error("Error occurred:", error);
// Display a more detailed error message on the page
const container = document.getElementById('todaysEntries');
container.textContent = 'Error loading entries: ' + error.message;
}
function getAllEntries() {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("DailyTrack");
return sheet.getDataRange().getValues();
}
function displayAllEntries(entries) {
const container = document.getElementById('allEntries');
entries.forEach(entry => {
const div = document.createElement('div');
div.textContent = `Item: ${entry[0]}, Date: ${entry[1]}, Quantity: ${entry[2]}`;
container.appendChild(div);
});
}
// Function to populate the combo-box with items from Google Sheets
function populateFoodItems(items) {
var select = document.getElementsByName("foodItem")[0];
items.forEach(function(item) {
var option = document.createElement('option');
option.value = option.textContent = item;
select.appendChild(option);
});
}
function displayTodaysEntries(entries) {
console.log("Entries received:", entries); // This line logs the data to the console
//Check if entries is not null or undefined
if (!entries) {
console.error('No entries received');
return;
}
const container = document.getElementById('todaysEntries');
entries.forEach(entry => {
const div = document.createElement('div');
div.textContent = `Item: ${entry[0]}, Quantity: ${entry[2]}`; // Adjust according to your data structure
container.appendChild(div);
});
}
function submitEntry() {
var foodItem = document.getElementsByName("foodItem")[0].value;
var quantity = document.getElementsByName("quantity")[0].value;
google.script.run
.withSuccessHandler(function() {
displaySuccessMessage(foodItem, quantity);
})
.addEntry(foodItem, quantity);
}
function displaySuccessMessage(foodItem, quantity) {
var messageContainer = document.getElementById('messageContainer');
// Create a new div for the message
var messageDiv = document.createElement('div');
messageDiv.textContent = 'You have consumed ' + quantity + ' ' + foodItem;
messageDiv.style.color = 'red'; // You can add more styling as needed
// Append the new message div to the container
messageContainer.appendChild(messageDiv);
}
// Load items into the combo-box when the page loads
document.addEventListener('DOMContentLoaded', function() {
google.script.run.withSuccessHandler(populateFoodItems).getFoodItems();
});
document.addEventListener('DOMContentLoaded', function() {
google.script.run
.withSuccessHandler(displayTodaysEntries)
.withFailureHandler(handleError)
.getTodaysEntries();
});
document.addEventListener('DOMContentLoaded', function() {
google.script.run
.withSuccessHandler(displayAllEntries)
.getAllEntries();
});
</script>
</body>
</html>
code.js
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index')
.setTitle('Food Tracker') // Optional: Set a title for your web app page
.setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}
function addEntry(foodItem, quantity) {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("DailyTrack");
sheet.appendRow([foodItem, new Date(), quantity]);
}
function submitEntry() {
var foodItem = document.getElementsByName("foodItem")[0].value;
var quantity = document.getElementsByName("quantity")[0].value;
google.script.run
.withSuccessHandler(function() {
displaySuccessMessage(foodItem,quantity);
})
.addEntry(foodItem, quantity);
}
// Function to display success message
function displaySuccessMessage(foodItem, quantity) {
var messageContainer = document.getElementById('messageContainer');
// Create a new div for the message
var messageDiv = document.createElement('div');
messageDiv.textContent = 'You have consumed ' + quantity + ' ' + foodItem;
messageDiv.style.color = 'red'; // You can add more styling as needed
// Append the new message div to the container
messageContainer.appendChild(messageDiv);
}
function getEntries() {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("DailyTrack");
return sheet.getDataRange().getValues();
}
function getFoodItems() {
var sheet = SpreadsheetApp.openById('1a04dsi8NSHP6QQY4ieidGlMoNQqINdBP6y_kPL-UGb8').getSheetByName('DataSets');
var data = sheet.getDataRange().getValues();
return data.map(function(row) { return row[0]; }); // Assuming items are in the first column
}
function getTodaysEntries() {
try {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("DailyTrack");
const today = new Date();
today.setHours(0, 0, 0, 0); // Set to start of the day
Logger.log("Today's Date (Start of Day): " + today);
const data = sheet.getDataRange().getValues();
Logger.log("Data from Spreadsheet: ");
Logger.log(data);
const filteredData = data.filter(row => {
const entryDate = new Date(row[1]); // Assuming date is in the second column
entryDate.setHours(0, 0, 0, 0);
Logger.log("Entry Date: " + entryDate + ", Today: " + today + ", Comparison Result: " + (entryDate.getTime() === today.getTime()));
return entryDate.getTime() === today.getTime();
});
Logger.log("Filtered Data (Today's Entries): ");
Logger.log(filteredData);
return filteredData;
} catch (error) {
Logger.log('Error in getTodaysEntries: ' + error.toString());
throw new Error('Error fetching entries.');
}
}
好的，刚刚发现问题。显然，当客户端 js 子句读取时，js Date() 部门会产生错误。我使用“new Date().toString()”将数据保存到电子表格的方式更改为字符串类型，这解决了问题。