Displaying Arrays in a list with EJS

Question

I am making a simple todo list to learn node.js and I'm using EJS for templating. I am using a for loop to loop through an array that I have set, to display each item on the list, and have added a form for the user to add to the list. My problem is, now that I've created this array, nothing appears where I am trying to render it. Is there something I am missing when displaying arrays?

EDIT: I should have explained that my particular code was (for a class) to use specifically a for loop and not the forEach() method. My question also should have reflected that I could not see the difference between my code and some others on stackoverflow because it was a typo.

list.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>To Do List</title>
</head>
<body>
<h1><%= whichDay %></h1>

<ul>
    <% for (var i = 0; i < newListItems; i++) { %>
        <li> <%= newListItems[i] %> </li>
    <% } %>
</ul>

<form class="new-item" action="/" method="POST">
    <input type="text" class="" name="newItem" placeholder="Add to list">
    <button type="submit" name="button">Add</button>
</form>
</body>
</html>

app.js

const bodyParser = require(`body-parser`);
const express    = require(`express`);
const app        = express();
//list of items added by user
var listOfItems = ["Something in this list"];

app.set(`view engine`, `ejs`);

app.use(express.static(`public`));
app.use(bodyParser.urlencoded({extended:true}));

app.get(`/`, function(req, res){
    //get full date
    var today = new Date();
    //set the current date to an integer (saturday==6)
    var options = {
        weekday: "long",
        day:     "numeric",
        month:   "long"
    };

    var day = today.toLocaleDateString(`en-US`, options);
    //render the given day inside list.ejs using 'whichDay' key
    res.render(`list`, {whichDay: day, newListItems: listOfItems});
});

app.post('/', function(req, res){
    //save 'item' form data
    var item = req.body.newItem;
    //push 'item' data to 'items' array
    listOfItems.push(item);
    //reload to root
    res.redirect("/");
});

app.listen(3000, function(){
    console.log(`Server running`)
})

omg thank you, how i forgot to write .length is beyond me... — Colton Van Bastelaere, Jun 14 '19 at 14:59
You're very welcome! Well if that actually solved your problem ill post it as answer, haha — NullDev, Jun 14 '19 at 15:00
Possible duplicate of [Inside Express/EJS templates, what is cleanest way to loop through an array?](https://stackoverflow.com/questions/16153384/inside-express-ejs-templates-what-is-cleanest-way-to-loop-through-an-array) — Saurabh Mistry, Jun 14 '19 at 15:06

score 6 · Accepted Answer · answered Jun 14 '19 at 15:05

using for loop :

<ul>
    <% for (var i = 0; i < newListItems.length ; i++) { %>
        <li> <%= newListItems[i] %> </li>
    <% } %>
</ul>

using forEach loop :

<ul>
        <% newListItems.forEach(function(item,index){ %>
            <li> <%= item %> </li>
        <% }) %>
    </ul>

score 1 · Answer 2 · answered Jun 14 '19 at 15:02

1

_{(from my comment)}

If you want to iterate over the array, you need to use the arrays length:

for (var i = 0; i < newListItems.length; i++) {
    // ...
}

answered Jun 14 '19 at 15:02

NullDev

6,739
4
30
54

Displaying Arrays in a list with EJS

2 Answers2