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:
The 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.
<!--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