我遇到了 ejs 模板的問題。我已經在另一個專案中使用過它并且它起作用了，但是在這個專案中它似乎不起作用，它顯示的是一個空白頁面，并且它不會使用傳遞的資料呈現卡片。這是我的“查看產品”路線代碼和“viewproducts.ejs”的 html 代碼。
查看產品路線：
app.get('/viewproducts', function (req, res) {
var names = [];
var prices = [];
var descriptions = [];
var product = [];
var length;
Product.find(function (err, products) {
if (err) {
console.log(err);
} else {
length = products.length;
names = products.map(function (i) {
return i.name;
});
prices = products.map(function (i) {
return i.price;
});
descriptions = products.map(function (i) {
return i.description;
});
}
for (var i = 0; i < length; i ) {
product.push({
name: names[i],
description: descriptions[i],
price: prices[i],
});
}
console.log(product);
});
res.render('viewproducts', { artisanproduct: product });
});
查看產品.ejs
<body>
<% artisanproduct.forEach((product)=>{ %>
<div>
<div class="card-body">
<div class="row">
<div class="col-lg-3">
<img class="w-100"src="" alt="">
</div>
<div class="col-lg-9">
<h5 class="card-title"><%=product.name%></h5>
<p class="card-text"><%=product.description%></p>
</div>
</div>
<h2><%=product.price%><span>MAD</span></h2>
<button type="submit">BUY</button>
</form>
</div>
</div>
</div>
<%})%>
</body>
uj5u.com熱心網友回復：
res.render()在為它收集任何資料之前，您正在呼叫它。 Product.find()是非阻塞和異步的。因此，要使用其結果，您的代碼必須位于其回呼或從該回呼呼叫的函式中。更改并簡化為：
app.get('/viewproducts', function (req, res) {
Product.find(function (err, products) {
if (err) {
console.log(err);
res.sendStatus(500); // send error response
return;
}
const product = products.map(item => {
return {
name: item.name,
price: item.price,
description: item.description
};
});
res.render('viewproducts', { artisanproduct: product });
});
});
變更概要：
res.render()在Product.find()回呼內部移動，以便它可以訪問該資料。- 在一個
.map()而不是多個中構建產品陣列。 - 出現錯誤時發送錯誤回應。
- 使用
const或let代替var。 - 洗掉不必要的臨時陣列和臨時變數。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/350173.html
標籤：javascript 节点.js 表达 ejs