EJS 模板不呈现任何数据答案

【问题标题】：EJS template not rendering any dataEJS 模板不呈现任何数据
【发布时间】：2021-11-03 15:39:45
【问题描述】：

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

查看products.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>

【问题讨论】：

你的ejs文件有一个额外的结束div标签和结束form标签
我删除了它们。它不影响代码。仍然没有渲染任何数据

标签： javascript node.js express ejs

【解决方案1】：

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

【讨论】：

非常感谢，它成功了。