EJS 模板不呈现任何数据

Question

我在使用 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 });
});

viewproducts.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>

Answer 1

您在为 res.render() 收集任何数据之前致电 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。
删除不需要的临时数组和临时变量。

EJS 模板不呈现任何数据

EJS template not rendering any data

javascript

ejs

node.js

express