Отображение массивов в списке с EJS - PullRequest
Новая
       30

Отображение массивов в списке с EJS

0 голосов
/ 14 июня 2019

Я делаю простой список задач для изучения node.js и использую EJS для шаблонов. Я использую цикл for, чтобы перебрать массив, который я установил, чтобы отобразить каждый элемент в списке, и добавил форму, которую пользователь может добавить в список. Моя проблема в том, что теперь, когда я создал этот массив, ничего не появляется там, где я пытаюсь его отобразить. Что-то мне не хватает при отображении массивов?

РЕДАКТИРОВАТЬ: я должен был объяснить, что мой конкретный код был (для класса), чтобы использовать специально для цикла, а не метод forEach (). Мой вопрос также должен был отражать то, что я не мог видеть разницу между моим кодом и некоторыми другими в stackoverflow, потому что это была опечатка.

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`)
})

Ответы [ 2 ]

1 голос
/ 14 июня 2019

(из моего комментария)

Если вы хотите перебрать массив, вам нужно использовать длину массивов: 

for (var i = 0; i < newListItems.length; i++) {
    // ...
}
0 голосов
/ 14 июня 2019

с использованием цикла for: 

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

с использованием цикла forEach: 

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