How to Loop through JSON in EJS ?
Last Updated :
28 Apr, 2025
EJS stands for Embedded JavaScript. It is a template engine designed to be used with server-side JavaScript environments like NodeJS and It is used to generate dynamic content in a web page.
In this article, we will learn about How to Loop through JSON in EJS with different Approaches.
Approaches to Create Loop through JSON in EJS:
We will go through different approaches to Loop through JSON Array and print the data using EJS. refer to the example section for examples of all approaches.
Using Standard For Loop:
<% for (let i = 0; i < data.length; i++) { %>
<%= data[i].JSON-key %>
<% } %>Using Map Function:
<% data.map((item) => { %>
<%= item.JSON-key %>
<% }); %>Using forEach Loop:
<% data.forEach((item) => { %>
<%= item.JSON-key %>
<% }); %>Using for-in Loop:
<% for (let key in data) { %>
<% data[key].JSON-key -->
<% } %>Steps to Create Node App & Install Required Modules:
Step 1: Create a NodeJS application using the following command:
npm init -y
Step 2: Install required Dependencies:
npm i ejs express
Project Structure:
Project StructureThe updated dependencies in package.json file will look like:
"dependencies": {
"ejs": "^3.1.9",
"express": "^4.18.2"
}Example: The Below example is demonstrating the different approaches to Loop through JSON in EJS.
HTML
<!--File path: views/index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EJS Example</title>
<style>
h1 {
color: green;
text-align: center;
}
.container{
display: flex;
justify-content: center;
gap:10px;
}
.box{
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<h1>GeeksForGeeks | Loop through JSON Example</h1>
<div class="container">
<div class="box">
<b>Approach 1: Using Standard For Loop</b>
<% for (let i=0; i < courses.length; i++) { %>
<ul>
<li><b>Course name:</b>
<%= courses[i].name %>
</li>
<li><b>Course Category:</b>
<%= courses[i].category %>
</li>
<li><b>Topics:</b>
<ul>
<% for (let j=0; j < courses[i].topics.length; j++) { %>
<li>
<%= courses[i].topics[j] %>
</li>
<% } %>
</ul>
</li>
</ul>
<% } %>
</div>
<div class="box">
<b>Approach 2: Using Map Function</b>
<% courses.map((course)=>{ %>
<ul>
<li><b>Course name:</b>
<%= course.name %>
</li>
<li><b>Course Category:</b>
<%= course.category %>
</li>
<li><b>Topics:</b>
<ul>
<% course.topics.map((topic)=>{ %>
<li>
<%= topic %>
</li>
<% }) %>
</ul>
</li>
</ul>
<% }) %>
</div>
<div class="box">
<b>Approach 3: Using forEach Loop</b>
<% courses.forEach((course)=>{ %>
<ul>
<li><b>Course name:</b>
<%= course.name %>
</li>
<li><b>Course Category:</b>
<%= course.category %>
</li>
<li><b>Topics:</b>
<ul>
<% course.topics.forEach((topic)=>{ %>
<li>
<%= topic %>
</li>
<% }) %>
</ul>
</li>
</ul>
<% }) %>
</div>
<div class="box">
<b>Approach 4: Using for-in Loop</b>
<% for(let i in courses) { %>
<ul>
<li><b>Course name:</b>
<%= courses[i].name %>
</li>
<li><b>Course Category:</b>
<%= courses[i].category %>
</li>
<li><b>Topics:</b>
<ul>
<% for(let j in courses[i].topics) { %>
<li>
<%= courses[i].topics[j] %>
</li>
<% } %>
</ul>
</li>
</ul>
<% } %>
</div>
</div>
</body>
</html>
//File path: /app.js (root)
// Import required modules
const express = require('express');
const path = require('path');
// Create an Express application
const app = express();
// Define the port for the server to listen on
const port = 3000;
// Set EJS as the view engine
app.set('view engine', 'ejs');
// Set the views directory to 'views' in the current directory
app.set('views', path.join(__dirname, 'views'));
// Define a route to render the Pug template when the root path is accessed
app.get('/', (req, res) => {
//Sending this data from Server
const data = {
courses: [
{
name: 'Web Development',
category: 'Programming',
topics: ['HTML', 'CSS', 'JavaScript']
},
{
name: 'Java',
category: 'Programming',
topics: ['Introduction to Java', 'Object-Oriented Programming']
}
]
};
// Render the EJS template named 'index' and pass the data
res.render('index', data);
});
// Start the server and listen on the specified port
app.listen(port, () => {
// Display a message when the server starts successfully
console.log(`Server is running at http://localhost:${port}`);
});
To run the application use the following command:
node app.js
Output: Now go to http://localhost:3000 in your browser:
Conclusion:
EJS offers a easy mechanism for looping through JSON data within templates. By utilizing JavaScript code enclosed within <% %> tags, developers can efficiently iterate over JSON arrays or objects. This capability enables dynamic rendering of HTML content based on JSON data, facilitating the creation of dynamic and interactive web applications
Similar Reads
How to Loop Through an Array in JavaScript? Here are the various ways to loop through an array in JavaScript1. Using for LoopThe for loop is one of the most used ways to iterate over an array. It gives you complete control over the loop, including access to the array index, which can be useful when you need to modify elements or perform other
4 min read
How to Loop Through an Array in JavaScript? Here are the various ways to loop through an array in JavaScript1. Using for LoopThe for loop is one of the most used ways to iterate over an array. It gives you complete control over the loop, including access to the array index, which can be useful when you need to modify elements or perform other
4 min read
How to open JSON file ? In this article, we will open the JSON file using JavaScript. Â JSON stands for JavaScript Object Notation. It is basically a format for structuring data. The JSON format is a text-based format to represent the data in form of a JavaScript object.Approach:Create a JSON file, add data in that JSON fil
2 min read
How to write a for loop in ES6 ? Loops are the way to do the same task again and again in a cyclic way. A loop represents a set of instructions that must be repeated. In a loop’s context, a repetition is termed an iteration. There are mainly two types of loops: Entry Controlled loops: In this type of loop the test condition is test
3 min read
How to use Ejs in JavaScript ? EJS or Embedded Javascript Templating is a templating engine used by Node.js. The template engine helps to create an HTML template with minimal code. Also, it can inject data into the HTML template on the client side and produce the final HTML. Installation StepsInstall the module using the followin
3 min read
How to Loop through array of JSON object with *ngFor in Angular ? JavaScript Object Notation (JSON) is a text-based, human-readable interchange format used for representing simple data structures and objects in web browser-based code. In order to Loop through an array of JSON objects, the *ngFor directive can be utilized that helps to dynamically generate HTML con
3 min read