使用Handlebars.js显示JSON数组

Question

试图使用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（'/员工”，函数（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> 
      ...