Handlebars 在 Node Express 应用程序中呈现 json 数组中的额外空对象

Question

我正在尝试从对 REST API 的调用中获取数据，并使用 Handlebars 将其呈现为列表，这是我在 Node Express 应用程序中的视图引擎

这是我的路线：

router.get('api/projects', function(req, res){

    Project.find(function(err, projects){
        if(err)
            res.send(err);

        console.log(projects);

        res.render('list-view', projects);
    });
});

"projects" JSON 数组包含具有 Name 和 _id 键的不同项目

这是我的 html 列表-view.hbs:

{{#each .}}

<div class="thumbnail">
  <div class="caption">
    <h5> Name: {{name}} </h5>
  </div>
</div>

{{/each}}

出于某种原因，我的列表视图页面会按计划在列表中呈现项目，但随后总是会在列表末尾显示一些空项目。我不知道为什么。所以说我的项目数组中有 8 个项目......我的页面将正确呈现所有 8 个，但总共 11 个，因为最后几个是空的。我使用 console.log(projects) 来验证数组中只有 8 个项目。关于为什么我会得到额外的任何想法？

Answer 1

我想出了解决这个问题的方法。项目 json 需要将数组作为单个对象传递给车把：

router.get('/api/projects', function(req, res){

    Project.find(function(err, projects){
        if(err)
            res.send(err);
        res.render('list-view', {projects: projects});
    });
});

然后我的#each 助手看起来像这样：

    {{#each projects}}
    <div class="thumbnail">
      <div class="caption">
       <h5> Name: {{name}} </h5>
      </div>
    </div>
    {{/each}}

现在列表已正确呈现。

Answer 2

关于已接受的答案，

有

res.render('list-view', {projects: projects}) 在你的 JavaScript 和
{{#each projects}} 在您的 Handlebars 模板中

相当于拥有

res.render('list-view', projects) 在你的 JavaScript 和
{{#each .}} 或 {{#each this}} 在您的 Handlebars 模板中。

您的问题可能是您从 API 传递了一个对象，其中包括所有可序列化的属性。

试试改用这个：

res.render('list-view', projects.get());

.get() returns只有我们关心的数组。

Handlebars 在 Node Express 应用程序中呈现 json 数组中的额外空对象

Handlebars renders extra empty objects from json array in Node Express app

javascript

json

express

handlebars.js