Handlebars在Node Express应用程序中渲染来自json数组的额外空对象

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

本文关键字：数组 json 对象 Express Node 应用程序 Handlebars      更新时间：2023-09-26

我正在尝试从对 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);
    });
});

"项目"JSON 数组包含具有名称和_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 个项目。 关于为什么我得到额外的任何想法？

我想出了解决这个问题的方法。 项目 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}}

现在列表已正确呈现。

关于接受的答案，

拥有

  • res.render('list-view', {projects: projects})在你的 JavaScript 和
  • {{#each projects}}车把模板

相当于拥有

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

您的问题可能是您正在从包含所有可序列化属性的 API 传入对象。

请尝试改用以下内容：

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

.get()只返回我们关注的数组。

相关文章：