为什么单击搜索按钮时我的表不会显示



当使用JavaScript单击搜索按钮时,我无法获得要显示的表。不知道为什么,有人能帮忙吗?下面的代码片段以及下面链接的实际转发和网站。

这里是GitHub回购,如果你愿意的话,你可以看到整个网站:

https://github.com/Chad1515/pets-r-us

以下是部署在heroku上的站点:

https://oneal-pets-r-us.herokuapp.com/

//trying to display appointments on my appointment page
app.get('/my-appointments', (req, res) => {
res.render('my-appointments', {
title: 'My 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);
}
})
})
<!--form inputs and card for appointments-->
<section>

<div class="card2">                
<p>My Appointments</p>
<hr class="third">  
<div class="form">
<div class="form-field">
<label for="email">email</label><br />
<input type="text" class="input" name="email" id="email" required>
</div>

<div class="form-field">
<input type="submit" value="Search" id="search" class="btn">
</div>

<div id="appointments"></div>
</div>
</div>
</section>

<script>

document.getElementById('search').onclick = function() {
const email = document.getElementById('email').value;

fetch('/api/appointments/' + email)
.then(res => res.json())
.then(data => {
let tableString = `<br /><br /><h4 style="font-size: 32px; text-align: center; padding-bottom: 10px;">
My Appointments</h4><table id="appointments" class="table"><tr><th>First name</th><th>Last name</th><th>Email</th><th>Service</th></tr>`;

for (let appointment of data) {
tableString += `<tr><td>${appointment.firstName}</td><td>${appointment.lastName}</td><td>${appointment.email}</td><td>${appointment.service}</td></tr>`;
}

tableString += `</table>`;

document.getElementById('appointments').innerHTML = tableString;
});
}

</script>

看起来您使用的是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 {
// Respond with the appointments documents instead of the Appointment model
res.json(appointments);
}
})
})

最新更新