Passing Data to EJS Templates - Coding

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.

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>
</body>
</html>

JavaScript

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.

JavaScript

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.

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.

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>
    <%- 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).

HTML

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

JavaScript

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.

Reffered: https://www.geeksforgeeks.org

Express.js

Related
Music Playlist Manager with Node.js and Express.js
Subscription Management System with NodeJS and ExpressJS
Budget Tracking App with Node.js and Express.js
How to Deploy ExpressJS on Netlify ?
Flask vs Express.js: Top Differences

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	12