使用 EJS 在列表中显示数组答案

【问题标题】：Displaying Arrays in a list with EJS使用 EJS 在列表中显示数组
【发布时间】：2019-10-29 05:40:36
【问题描述】：

我正在制作一个简单的待办事项列表来学习 node.js，并且我正在使用 EJS 进行模板化。我正在使用 for 循环遍历我设置的数组，以显示列表中的每个项目，并添加了一个表单供用户添加到列表中。我的问题是，现在我已经创建了这个数组，在我试图渲染它的地方什么也没有出现。显示数组时有什么遗漏吗？

编辑：我应该解释说我的特定代码是（对于一个类）专门使用 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`)
})

【问题讨论】：

试试：for (var i = 0; i < newListItems.length; i++) {
天哪，谢谢你，我怎么忘了写。长度超出了我的范围......
不客气！好吧，如果这确实解决了您的问题，请将其作为答案发布，哈哈
Inside Express/EJS templates, what is cleanest way to loop through an array?的可能重复
不需要循环<li><%= newListItems.join('</li><li>') %></li>

标签： javascript arrays node.js ejs

【解决方案1】：

使用 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>

【讨论】：

【解决方案2】：

_{(from my comment)}

如果要遍历数组，需要使用数组长度：

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

【讨论】：