Passing Data to EJS Templates
EJS (Embedded JavaScript) is a simple templating language that lets you induce HTML language with plain JavaScript. It’s especially popular in Node.js operations for rendering dynamic web runners. It is used to dynamically render HTML pages on the server side. This article will give a detailed companion on how to pass data to EJS templates.
Step to Create a NodeJS and Installing Module
Firstly, let’s set up a basic Node.js project with EJS.
Step 1: Create a new directory for a project using the command:
mkdir ejs-DataPass
cd ejs-DataPass
Step 2: Initialize NPM using the command which will create a package.json file:
npm init -y
Step 3: Install the EJS module with Express dependency using the command:
npm i express ejs
Project Structure:
Project Structure
The updated dependencies in the package.json file will look like this.
"dependencies": {
"ejs": "^3.1.6",
"express": "^4.17.1"
}
Example: Below is an example to Passing Data to EJS Templates.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exapmle</title>
</head>
<body>
<h1>
Hello <%= name %>!
</h1>
</body>
</html>
import express from "express";
const app = express();
const port = 3000;
app.get("/", (req,res) =>{
res.render("index.ejs", {
name:"YourName"
});
});
app.listen(port, ()=>{
console.log(`Listening to port ${port}.`);
});
Output:
Output
Passing Data to the Template
In the app.js file, the res.render method is used to pass data to the EJS template. The second argument to res.render is an object containing key-value pairs. The keys correspond to the variable names in the EJS template, and the values are the data you want to pass.
In the example provided, the data object {name: “YourName”} is passed to the template. Within index.ejs, <%= name %> is placeholder that will be replaced with the actual value.
Dynamic Data Example
To demonstrate passing dynamic data, let’s modify our example to include a list of items.
1. Update the route in index.js to include an array of items.
app.get("/", (req,res) =>{
res.render("index.ejs", {
name:"YourName",
items: items
});
});
2. Modify index.ejs to iterate over the items array and display each item.
Example: In this example, <% items.forEach(item => { %> and <% }) %> are EJS syntax for looping over the array and inserting each item’s value into the HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exapmle</title>
</head>
<body>
<h1>
Hello <%= name %>!
</h1>
<ul>
<% items.forEach(item => { %>
<li><%= item %></li>
<% }) %>
</ul>
</body>
</html>
Output:
Output
Using Partials
EJS supports partials, which are reusable snippets of code. To use partials, you typically create a partials directory inside views.
Create a Header Partial:
In views/partials/header.ejs, add some HTML content.
<header>
<h1>Welcome to GFG EJS data passsing example</h1>
</header>
Create a Footer Partial:
In views/partials/footer.ejs, add some HTML content.
<footer>
<p>Copyright © from footer</p>
</footer>
Include the Partial:
Modify index.ejs to include the partials.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Exapmle</title>
</head>
<body>
<%- include("partials/header.ejs") %>
<h1>
Hello <%= name %>!
</h1>
<ul>
<% items.forEach(item => { %>
<li><%= item %></li>
<% }) %>
</ul>
<%- include("partials/footer.ejs") %>
</body>
</html>
The <%- include(“partials/header”) %> and <%- include(“partials/footer.ejs”) %> line includes the content of header.ejs and footer.ejs in the index.ejs template.
Output:
Output
Handling Form Data
EJS can also be used to render forms and handle form submissions. Here’s a simple example:
Update index.js to Handle Form Submission:
Use body-parser to handle form data (body-parser is a Middleware).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Form</title>
</head>
<body>
<form action="/submit" method="POST">
<input type="text"
name="username"
placeholder="Enter your name">
<button type="submit">Submit</button>
</form>
<% if (message) { %>
<p><%= message %></p>
<% } %>
</body>
</html>
import express from "express";
import bodyParser from "body-parser";
const app = express();
const port = 3000;
app.use(bodyParser.urlencoded({ extended: true }));
app.get("/", (req, res) => {
res.render("index.ejs", {
message:""
});
});
app.post("/submit", (req,res) =>{
const userName = req.body['username'];
res.render("index.ejs",{
message:`Hello from ${userName}!`
});
});
app.listen(port, ()=>{
console.log(`Listening to port ${port}.`);
});
Output:
Output
Conclusion
EJS is a powerful yet simple templating language that integrates seamlessly with Node.js. By following this guide, you should be able to set up an EJS-powered application, pass dynamic data to your templates, use partials to organize your code, and handle form data efficiently. EJS allows for the creation of maintainable and dynamic web applications, making it a valuable tool in any web developer’s toolkit.