【问题标题】:Ejs forEach loop is not definedEjs forEach 循环未定义
【发布时间】:2019-01-02 20:04:53
【问题描述】:

所以这是我的问题,我正在尝试在 ejs 中执行一个 forEach,它将 html 呈现到页面上。这是 ejs forEach 循环的商店页面。

<% include _includes/header.ejs %>
   <div class="container">
     <% cards.forEach( card => { %>
      <% include('_includes/cards.ejs', card) %>
  <% }) %>
</div>
<% include _includes/footer.ejs %>

这是cards.ejs文件

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src='' alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title"><%= titleCard %></h5>
    <p class="card-text"><%= desc %></p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

这是我的商店页面的快递代码

 app.get('/store', function(req, res) {
  res.render('store', {
    user: req.user,
    title: 'Store'});
});

最后是这个

cards = [
  {
    titleCard: 'title 1',
    desc: 'just some text'
  },
  {
    titleCard: 'title 1',
    desc: 'just some text'
  },
  {
    titleCard: 'title 1',
    desc: 'just some text'
  },
]

我尝试了多种方法,但总是收到错误卡未定义。我应该把这个放在哪里?我非常感谢您对此的帮助!

【问题讨论】:

  • 您没有显示您的 Express 代码,但您必须将 cards 传递给 res.render() 以便 EJS 在尝试呈现页面时拥有数据。任何将 EJS 与 Express 结合使用的基本示例都应该向您展示如何传递要在渲染模板中使用的数据。
  • @jfriend00 我已经用快递代码更新了我的帖子。

标签: arrays node.js express foreach ejs


【解决方案1】:

您必须将cards 传递给res.render()。你可以这样做:

app.get('/store', function(req, res) {
  res.render('store', {
    user: req.user,
    title: 'Store',
    cards: cards
  });
});

【讨论】:

  • 我不是 EJS 专家,所以我无法评论您的 EJS 模板是否设计正确,但这是您将数据传递给任何与 Express 兼容的模板引擎的方式,这就是我以为你在问。
  • 对,所以我只是从另一个js文件中导出cards数组?
  • @Zack - 如果它是在另一个文件中声明或创建的,那么您必须将其导入到您调用 res.render() 的位置,因为那是您需要的位置。
  • 是的,我使用了 module.exports,但我有一个错字。我复制并粘贴了另一个我已导入但忘记更改名称的导出。但是,我现在收到一个新错误,说 cards.forEach 不是函数
  • @Zack - 听起来cards 不是一个数组。我无法真正调试我看不到的代码,但似乎 cards 现在已定义,但不是数组。
【解决方案2】:

这里有几件事可能会有所帮助,

1- 确保您以正确的方式导出此卡片模块,基本上您不能在没有显式导出的情况下仅导入它。

2- 尝试在包含方法中使用对象参数

<% include('_includes/cards.ejs', {card : card}) %>

抱歉,我现在无法测试它,但试试这个,让我知道它是否有效。

【讨论】:

  • 我相信我按照你说的做了,但是没有用。我真的不知道问题出在哪里。
  • @Zack - 我猜你没有正确地进行导出和导入。请显示导出cards 数组的确切代码并显示导入它的代码并显示您正在使用的res.render() 代码行。您可以将这些添加到问题的末尾。
猜你喜欢
  • 1970-01-01
  • 2020-08-29
  • 2017-09-29
  • 2018-11-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多