0

Trying to use the handlebars.js template system to display the entirety of an employees array from a JSON array. The data from the array is not being displayed and I'm not sure why. I'm new to handlebars so apologies if the answer is obvious. Data-service is where the functions are that fills the employees array from the JSON array and SERVER.JS is where these functions get called

//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;

HANDLEBARS

<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>

1 Answer 1

1

When you use each, you need to use this to reference the object from the array. So your handlebars should look like:

{{#each data}}
        <tr class="collection-item">
            <td>{{this.employeeNum}}</td>
            ...
Sign up to request clarification or add additional context in comments.

2 Comments

Doh! Sorry! Are you definitely passing the data you collect from the file in data-service.js into the context for the template? In your server.js it looks like it's just pulling data out of thin air (unless you've posted a cut down version of the code)
I've updated it to include everything that involves displaying the employees

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.