Blog

Passing An Array of Objects to a View Using Express Handlebars and Control Structures in the View
Posted on August 6, 2016 in Node.js by Matt Jennings

/server.js File Example

// Module that deals with routing and
// "require" loads an additional library
var express = require('express');

// Express handlebars module
var exphbs = require('express-handlebars');

// An instance of the express app
var app = express();

// Tell express to use handlebars as it's templating engine
// and look for a file called "views/layouts/base.handlebars" for
// the master layouts and then other files inside "views"
app.engine('handlebars', exphbs({defaultLayout: 'base'}));
app.set('view engine', 'handlebars');

// "polls" variable represents the model as there is no database yet
// and is an array of objects
var polls = [
    {
        id:     1,
        name:   "Will the Warriors win the NBA championship?",
        is_featured: true
    }, 
    {
        id:     2,
        name:   "Will Trump win the GOP nomination?",
        is_featured: false
    }
];

// Define a route inside express,
// "get" refers to an HTTP method,
// in the callback function 
// "req" refers to a request object and
// "res" refers to a response object
app.get('/', function(req, res) {
    // Below prints "Hello World!" on screen 
    // when I go to "/" relative path on website
    // res.send('Hello World!');    
    
    // Tells Express to look for a 
    // "home.handlebars" template inside "base" directory
    res.render('home', {
        //show_polls: polls 
        show_polls: polls
    });
});

app.get('/tester', function(req, res) {
    // Below I'm passing in a JSON object (or hash table of keys and values, which is similar to an associative array) 
    // as a 2nd parameter to the "tester.handlebars" template
    res.render('tester', {
        first_name: "Donald",
        last_name: "Duck",
        now: new Date(),
        random_num: Math.round(Math.random() * 10)
    });
});


// Set up a static folder for files that don't change,
// like CSS and images and for example 
// if "hello.html" is inside this "public" directory then
// it this file will be viewable at "/static/hello.html"
app.use('/static', express.static('public'));

// For Cloud 9 I must use port 5000 (see below)
// and for other apps the port is usually 80
// Code below means listen to the default port number number 
// provided by the server (Cloud) or 5000, if none is provided,
// convert this into a number type, and assign it to a "port" variable
var port = Number(process.env.PORT || 5000);

// app listens to traffic on port 5000
app.listen(port);

/views/layouts/base.handlebars File Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Example App</title>
</head>
<body>
    <h1>Header</h1>
    <hr />
    
    {{!-- 
    This is a handlebars comment and
    code below outputs HTML from 
    res.render in server.js file
    --}}
    {{{body}}}
    
    <h1>Footer</h1>
</body>
</html>

/views/home.handlebars File Example

<h2>Welcome to the Predictionator App!</h2>

{{!-- 
If startment runs if variable exists 
or isn't assigned to an eempty value 
--}}
{{#if show_polls}}
<ul>
    {{!-- 
    In code below "each" interates over the "polls" property and 
    "this.name" refers to the property inside the array of objects
    --}}
    {{#each show_polls}}
        <li>{{this.name}}</li>
    {{/each}}
</ul>
{{!-- 
Else startment runs if DOESN'T variable exist
or IS assigned to an eempty value 
--}}
{{else}}
    <p><em>There are currently no polls.</em></p>
{{/if}}

Leave a Reply