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

/views/layouts/base.handlebars File Example

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

/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}}
    In code below "each" interates over the "polls" property and 
    "" refers to the property inside the array of objects
    {{#each show_polls}}
Else startment runs if DOESN'T variable exist
or IS assigned to an eempty value 
    <p><em>There are currently no polls.</em></p>

Leave a Reply

To Top ↑