How to Loop through JSON in EJS ?

Q: How to Loop through JSON in EJS ?

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.

How to parse JSON in Java

Design a Subscription Page in Tailwind CSS

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

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

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

Tags:

#EJS-Templating Language #View Engine #Node.js #Web Technologies

How to parse JSON in Java

Design a Subscription Page in Tailwind CSS