使用 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('/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>
            ...