使用Handlebars.js显示一个JSON数组

尝试使用handlebars.js模板系统从JSON数组中显示雇员数组的全部内容。 数组中的数据没有被显示，我不知道为什么。 如果答案是显而易见的，我是新来的车把手，所以很抱歉。 数据服务是从JSON数组填充员工数组的函数，SERVER.JS是这些函数被调用的地方

//SERVER.JS

var HTTP_PORT = process.env.PORT || 8080; var express = require('express'); var data = require('./data-service'); var fs = require('fs'); var app = express(); var path = require('path') var object = require('./data-service'); var bodyParser = require('body-parser') var exphbs = require('express-handlebars'); app.use(express.static(__dirname + '/public')); app.use(bodyParser.urlencoded({extended:true})) console.log("Express http server listening on 8080"); 

app.get（'/ employees'，function（req，res）{

  object.getAllEmployees().then((data) =>{ res.render("employeeList", {data: data, title: "Employees"}); }).catch((err) => { res.render("employeeList", { data: {}, title: "Employees" }); }) 

//DARA-SERVICE.JS

 var employees = []; var departments = []; var empCount = 0; var error = 0; var fs = require("fs"); function initialize(){ employees = fs.readFileSync("./data/employees.json", 'utf8', function(err, data){ if(err){ error = 1; } empCount = employees.length; employees = JSON.parse(data); }); departments = fs.readFileSync("./data/department.json", 'utf8', function(err, data){ if(err){ error = 1; } departments = JSON.parse(data); }); } function check() { return new Promise(function(resolve,reject){ if (error === 0){ resolve("Success"); } else if(error === 1){ reject("unable to read file"); } }) }; var getAllEmployees = function(){ return check().then(function(x){ console.log(x); console.log(employees); return employees; }).catch(function(x){ console.log("No results returned"); }); } module.exports.getAllEmployees = getAllEmployees; 

车把

 <div class = "row"> <div class="col-md-12"> <h1> {{title}} <a href="/employees/add" class = "btn btn-success pull-right" style="margin-top:5px;">Add&nbsp;New&nbsp;Employee</a> </h1> <hr /> </div> </div> <div class = "row"> <div class = "col-md-12"> <div class = "table-responsive"> <table class ="table"> <thead> <tr> <th>Employee&nbsp;Num</th> <th>Full&nbsp;Name</th> <th>Email</th> <th>Address</th> <th>Manager&nbsp;ID</th> <th>Status</th> <th>Department</th> <th>Hired&nbsp;On</th> <th></th> </tr> </thead> <tbody id="names" class="collection with-header"> {{#each data}} <tr class="collection-item"> <td>{{{employeeNum}}}</td> {{!-- TODO: search employee name --}} <td><a id = "employeesName" href="/employee/{{employeeNum}}">{{firstName}}&nbsp;{{last_name}}</a></td> <td><a href="mailto:{{email}}">{{email}}</a></td> <td>{{addressStreet}}&nbsp;{{addresCity}}&nbsp;{{addressState}}&nbsp;{{addressPostal}}</td> <td><a href="/employees?manager={{employeeManagerNum}}">{{employeeManagerNum}}</a></td> <td><a href="/employees?status={{status}}">{{status}}</a></td> <td><a href="/employees?department={{department}}">{{department}}</a></td> <td>{{hireDate}}</td> <td><a href="/employee/delete/{{employeeNum}}" class="btn btn-danger">remove</a></td> </tr> {{else}} <tr> <td>No&nbsp;Data&nbsp;Available</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr>{{/each}} </tbody> </table> <table style="display:none"> <tbody id="department-names"> {{#each departmentTitle}} <tr class="collection-item-department"> <td>{{departmentName}}</td> </tr> {{/each}} </tbody> </table> <div> <canvas id="myChart" width="20%" height="20%" style="display: block; height: 50%; width: 50%;"></canvas> </div> </div> </div> </div> 

Answer 1

当你使用each ，你需要使用this从数组中引用对象。 所以你的车把应该是这样的：

 {{#each data}} <tr class="collection-item"> <td>{{this.employeeNum}}</td> ...