Tutorials


EJS for loop


In EJS (Embedded JavaScript), the <% for %> loop is used to iterate over arrays or collections and generate HTML dynamically. This allows you to display lists of items, create repeated structures, or perform operations based on the data provided.

Syntax and Usage of <% for %> Loop in EJS

1. Basic Syntax

The basic syntax for a for loop in EJS is:

<% for (let i = 0; i < array.length; i++) { %>
    <!-- HTML to render for each item -->
<% } %>
  • <% for (let i = 0; i < array.length; i++) { %>: Starts the for loop. Here, i is the loop counter, array.length is the number of iterations, and array is the data you're iterating over.
  • <!-- HTML to render for each item -->: This is the content rendered for each iteration.
  • <% } %>: Ends the for loop.

2. Example Usage

Server-Side Code (Express):

app.get('/items', (req, res) => {
    const items = ['Apple', 'Banana', 'Cherry'];
    res.render('items', { items });
});

EJS Template (views/items.ejs):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Items List</title>
</head>
<body>
    <h1>Items List</h1>
    <ul>
        <% for (let i = 0; i < items.length; i++) { %>
            <li><%= items[i] %></li>
        <% } %>
    </ul>
</body>
</html>

In this example:

  • The for loop iterates over the items array.
  • For each item in the array, it generates a list item (<li>) displaying the item’s name.

3. Using Array Methods

You can also use array methods like forEach within your for loop for more advanced operations:

Example:

Server-Side Code:

app.get('/users', (req, res) => {
    const users = [
        { name: 'Alice', age: 25 },
        { name: 'Bob', age: 30 },
        { name: 'Charlie', age: 35 }
    ];
    res.render('users', { users });
});

EJS Template (views/users.ejs):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Users List</title>
</head>
<body>
    <h1>Users List</h1>
    <ul>
        <% users.forEach(user => { %>
            <li><%= user.name %> - <%= user.age %> years old</li>
        <% }); %>
    </ul>
</body>
</html>

In this example:

  • The forEach method is used to iterate over the users array.
  • Each user object’s name and age properties are displayed in the list.

4. Loop with Object Properties

If you need to iterate over the properties of an object, you can use a for...in loop:

Example:

Server-Side Code:

app.get('/settings', (req, res) => {
    const settings = {
        theme: 'dark',
        notifications: 'enabled',
        language: 'en'
    };
    res.render('settings', { settings });
});

EJS Template (views/settings.ejs):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Settings</title>
</head>
<body>
    <h1>Settings</h1>
    <ul>
        <% for (let key in settings) { %>
            <li><strong><%= key %>:</strong> <%= settings[key] %></li>
        <% } %>
    </ul>
</body>
</html>

In this example:

  • The for...in loop iterates over the properties of the settings object.
  • Each property name (key) and value are displayed in the list.

Summary

  • Basic Syntax: Use <% for (let i = 0; i < array.length; i++) { %> to loop through arrays or collections.
  • Using Array Methods: Employ methods like forEach for cleaner and more expressive loops.
  • Object Properties: Use for...in to iterate over object properties.

The <% for %> loop in EJS is a powerful tool for generating dynamic content based on data structures, allowing you to create flexible and responsive templates.



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about