Verwenden von "Handlebars.js" zum Anzeigen eines JSON-Arrays

Question

Der Versuch, das Vorlagensystem "handlebars.js" zu verwenden, um die Gesamtheit eines Angestellten-Arrays aus einem JSON-Array anzuzeigen. Die Daten aus dem Array werden nicht angezeigt und ich bin mir nicht sicher warum. Ich bin neu im Lenker und entschuldige mich, wenn die Antwort offensichtlich ist. Daten-Service ist, wo die Funktionen sind, dass die Mitarbeiter Array aus der JSON-Array füllt und SERVER.JS ist, wo diese Funktionen

//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 ('/ Mitarbeiter aufgerufen ‘, 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; 

HANDLE

<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

Wenn Sie each verwenden, müssen Sie this verwenden, um das Objekt aus dem Array zu verweisen. Ihr Lenker sollte also so aussehen:

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