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