Col*_*ere 2 javascript arrays ejs node.js
我正在制作一个简单的待办事项列表来学习 Node.js,并使用 EJS 进行模板化。我正在使用 for 循环来循环访问我设置的数组,以显示列表中的每个项目,并添加一个表单供用户添加到列表中。我的问题是,现在我已经创建了这个数组,但我尝试渲染它的地方什么也没有出现。显示数组时是否缺少某些内容?
编辑:我应该解释一下,我的特定代码(对于一个类)专门使用 for 循环而不是 forEach() 方法。我的问题也应该反映出我看不到我的代码和 stackoverflow 上其他一些代码之间的区别,因为这是一个拼写错误。
列表.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>
Run Code Online (Sandbox Code Playgroud)
应用程序.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`)
})
Run Code Online (Sandbox Code Playgroud)
使用 for 循环:
<ul>
<% for (var i = 0; i < newListItems.length ; i++) { %>
<li> <%= newListItems[i] %> </li>
<% } %>
</ul>
Run Code Online (Sandbox Code Playgroud)
使用 forEach 循环:
<ul>
<% newListItems.forEach(function(item,index){ %>
<li> <%= item %> </li>
<% }) %>
</ul>
Run Code Online (Sandbox Code Playgroud)