点击搜索按钮后表格无法显示的技术求助

1. 后端API数据返回错误 #

你的后端/api/appointments/:email路由中，查询完成后错误返回了Appointment模型本身，而非查询到的预约数据集合appointments，导致前端无法拿到有效数据渲染表格。

错误代码：

app.get('/api/appointments/:email', async(req, res, next) => {
    Appointment.find({'email': req.params.email}, function(err, appointments) {
        if (err) {
            console.log(err);
            next(err);
        } else {
            res.json(Appointment); // 错误：返回模型而非查询结果
        }
    })
})

修复后代码：

app.get('/api/appointments/:email', async(req, res, next) => {
    Appointment.find({'email': req.params.email}, function(err, appointments) {
        if (err) {
            console.log(err);
            next(err);
        } else {
            res.json(appointments); // 返回查询到的预约数组
        }
    })
})

2. 前端表单默认提交行为未阻止 #

搜索按钮是submit类型，点击时浏览器会默认触发表单提交，导致页面直接刷新，中断fetch请求的执行，表格还未渲染就丢失了状态。

错误代码：

document.getElementById('search').onclick = function() {
    const email = document.getElementById('email').value;
    // ... fetch逻辑
}

修复后代码：

document.getElementById('search').onclick = function(event) {
    event.preventDefault(); // 阻止表单默认提交行为，保留页面状态
    const email = document.getElementById('email').value;
    // ... fetch逻辑
}

3. DOM元素ID冲突（可选优化） #

前端生成的表格使用了id="appointments"，和承载表格的父div的ID重复，虽不直接影响当前功能，但可能引发后续DOM操作异常，建议修改表格ID：

修改后代码片段：

let tableString = `<br /><br /><h4 style="font-size: 32px; text-align: center; padding-bottom: 10px;">
    My Appointments</h4><table id="appointments-table" class="table"><tr><th>First name</th><th>Last name</th><th>Email</th><th>Service</th></tr>`;

额外排查建议 #

• 打开浏览器开发者工具（F12），切换到Network面板，查看fetch请求的状态码和返回数据，确认API是否正常返回预约数组。
• 在fetch链末尾添加错误捕获，方便定位请求失败原因：

fetch('/api/appointments/' + email)
    .then(res => res.json())
    .then(data => {
        // 表格渲染逻辑
    })
    .catch(err => console.error('请求出错:', err));

内容的提问来源于stack exchange，提问作者Chad ONeal