How to Loop through JSON in EJS ?
Last Updated :
05 Mar, 2024
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 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.
HTML
<!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 >
|
Javascript
const express = require( 'express' );
const path = require( 'path' );
const app = express();
const port = 3000;
app.set( 'view engine' , 'ejs' );
app.set( 'views' , path.join(__dirname, 'views' ));
app.get( '/' , (req, res) => {
const data = {
courses: [
{
name: 'Web Development' ,
category: 'Programming' ,
topics: [ 'HTML' , 'CSS' , 'JavaScript' ]
},
{
name: 'Java' ,
category: 'Programming' ,
topics: [ 'Introduction to Java' , 'Object-Oriented Programming' ]
}
]
};
res.render( 'index' , data);
});
app.listen(port, () => {
console.log(`Server is running at http:
});
|
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
Share your thoughts in the comments
Please Login to comment...