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

【问题标题】：Handlebars renders extra empty objects from json array in Node Express appHandlebars 在 Node Express 应用程序中呈现来自 json 数组的额外空对象
【发布时间】：2016-06-11 01:08:15
【问题描述】：

我正在尝试从对 REST API 的调用中获取数据，并使用 Handlebars 将其呈现为列表，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 键的不同项目

这是我在 list-view.hbs 上的 html：

{{#each .}}

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

{{/each}}

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

【问题讨论】：

尝试使用 {{@index}} 打印当前数组项的索引
它也会索引出额外的列表项。我的数组有 8 个项目。指数变为 11（脊椎敲击！）。

标签： javascript json express handlebars.js

【解决方案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}}

现在列表已正确呈现。

【讨论】：

【解决方案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() 只返回我们关心的数组。

【讨论】：