在对象上使用Pug进行迭代
在对象上使用Pug进行迭代
提问于 2018-10-17 01:58:47
从app.js向Pug传递对象
router.get('/', getMenuList, function (req, res, next) {
res.render('menu_items', {
title: 'The Weekly Menu',
message: 'The List',
dataset
});
});数据集如下所示
menu_date dish_name Display
2018-10-01 Fish 2018-10-01: Fish
2018-10-01 Green Beans 2018-10-01: Green Beans with Mushrooms and cream
2018-10-02 Out To Dinner 2018-10-02: Out To Dinner
2018-10-03 Oysters 2018-10-03: Oysters an the half shell
2018-10-03 Sauce Mignette 2018-10-03: Sauce Mignette我想在HTML上显示的是一个嵌套列表，如下所示
2018-10-01
Fish
Green Beans
2018-10-02
Out to diner
2018-10-03
Oysters
Sauce Mignette我的PUG代码如下所示，遍历对象，但我不知道如何获得嵌套列表
extends layout
block content
h2= title
-var wtf = dataset.length
-var n = 0
h1= message
each item in dataset
ul
li #{item.Menu_Date}下面发布的是编写html页面的app.js。代码很难看。使用javascript、html或CSS都不方便。
//submit
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
app.use(bodyParser.json());
var tedious = require('tedious');
var Promise = require('promise');
app.use(bodyParser.urlencoded({ extended: false }));
var path = require('path');
var fs = require('fs');
var router = express.Router();
var menu_data = [];
var menu = [];
app.engine('pug', require('pug').__express);
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.use(router);
app.use(express.static(path.join(__dirname, 'public')));
router.get('/', getMenuList, function (req, res, next) {
var item = [];
for(var row of menu_data ){
if(menu.length == 0) {
var newItem = {Date: row.MenuDate, Items: item};
menu.push(newItem);
}
if(row.MenuDate != menu[menu.length -1].Date) {
item = [];
var newItem = {Date: row.MenuDate, Items: item};
menu.push(newItem);
}
var newDish = {Dish: row.Item};
menu[menu.length -1].Items.push(row.Item);
/* var i = 0;
while(i < menu[menu.length -1].Items.length) {
console.log( menu[menu.length -1].Items[i]);
i++;
}
*/
}
fs.writeFileSync('./views/message.html', '<!DOCTYPE html><html><head><title>The Weekly Menu</title><link rel="stylesheet" href="/stylesheets/style.css"></head><body>', 'utf8', function(err){
if (err) throw err;
});
fs.appendFileSync('./views/message.html', '<h1>Why the drama</h1>', function(err){
if (err) throw err;
});
for(index = 0; index < menu.length ; index++ ) {
//console.log(menu[index].Date);
if(index ===0){
fs.appendFileSync('./views/message.html', '\r\n<ul>', function(err){
if(err) throw err;
});
}
fs.appendFileSync('./views/message.html', '\r\n<li>' + menu[index].Date + '</li>', function(err){
if(err) throw err;
});
for(newindex = 0; newindex < menu[index].Items.length; newindex++) {
//console.log(menu[index].Items[newindex])
if(newindex === 0 ){
fs.appendFileSync('./views/message.html','\r\n<ul>', function(err){
if(err) throw err;
});
}
fs.appendFileSync('./views/message.html', '\r\n<li> ' + menu[index].Items[newindex] + '</li>', function(err){
if(err) throw err;
});
}
fs.appendFileSync('./views/message.html', '\r\n</ul', function(err){
if(err) throw err;
});
} // end of outer loop
fs.appendFileSync('./views/message.html', '\r\n</ul>\r\n\<a href=\"http://localhost:3030/index\"> Input Menu Items</a>\r\n</body>\r\n</html>', function(err){
if(err) throw err;
});
/* res.render('menu_items', {
title: 'The Weekly Menu',
message: 'The List',
menu_data,
menu
}); */
res.sendfile('./views/message.html');
});
router.get('/index', function(req, res) {
res.render('index')
});
router.post('/update',submitMenuItem, function (req, res) {
var menu_data = req.body.menuDate;
var description = req.body.theItem;
res.render('update', {
title: 'All Quiet on the Western Front',
menuDate: menu_data,
MenuItem: description
});
});
// end of submitMenuItem
function getMenuList( req, res, next) {
var promise = new Promise(function(fulfill, reject){
var Connection = require('tedious').Connection;
var Request = require('tedious').Request;
var config = JSON.parse(fs.readFileSync('./config/config.json', 'utf8'));
var connection = new Connection(config);
connection.on('connect', function (err) {
if (err) {
console.log(err);
} else {
executeStatement();
}
});
/* function MenuItem(Menu_Date, Name, Display)
{
this.Menu_Data = Menu_Date;
this.Name = Name;
this.Display = Display;
} */
function executeStatement() {
var sql = "select dt_ofItem ,dish_name FROM LA_COUNTY.dbo.mn_items order by dt_ofItem";
var Request = require('tedious').Request;
request = new Request(sql, function (err, rowCount) {
if (err) {
reject(err);
} else {
if(rowCount < 1) {
callback(null, false);
}
else {
fulfill(menu_data);
}
}
});
request.on('row', function (columns) {
var Menu_Date = ""
columns.forEach(function (column) {
if(column.metadata.colName=== "dt_ofItem"){
Menu_Date = column.value.toDateString();
}
if(column.metadata.colName==="dish_name") {
//console.log(column.value);
//console.log('WTF');
//var item = new MenuItem(Menu_Date, column.value, Menu_Date + ": " + column.value);
var menu_stuff = {
MenuDate: Menu_Date,
Item: column.value
};
menu_data.push(menu_stuff);
//menu_data.push("Date" Menu_Date ,"Item" column.value );
//item = null;
}
});
});
request.on('doneProc', function (rowCount, more, returnStatus, rows) {
next(null, rows);
connection.close()
// console.log(menu_data[0].MenuDate);
menu_data = [];
});
connection.execSql(request);
}
});
} // end getclients
function submitMenuItem( req, res, next) {
var menu_date = req.body.menuDate;
var description = req.body.theItem;
var Connection = require('tedious').Connection;
var config = JSON.parse(fs.readFileSync('./config/config.json', 'utf8'));
var connection = new Connection(config);
var connection = new Connection(config);
connection.on('connect', function(err) {
executeStatement();
});
function executeStatement() {
var sql = "insert LA_County.dbo.mn_items (dt_ofItem, dish_name) values ('" + menu_date + "','" + description + "')"
var Request = require('tedious').Request;
request = new Request(sql, function(err, rowCount) {
if (err) {
reject(err);
} else {
if(rowCount < 1) {
callback (null, false);
}
else {
fulfill(menu_date);
}
}
});
request.on('row', function(columns) {
columns.forEach(function(column) {
//console.log(column.value);
});
});
request.on('doneProc', function (rowCount, more, returnStatus, rows) {
next(null, rows);
connection.close()
});
connection.execSql(request);
}
} // end of submitMenuItem这是PUG代码。我对此非常非常不确定
extends layout
block content
h2= title
-var wtf = menu_data.length
//h1 #{wtf}
-var n = 0
h1= message
ul
while n < wtf
li= menu_data[n++].MenuDate
ul
each entry in menu
li= entry.Date
-var i = entry.Items.length
h3 #{i}
-var q = 0
ul
each dish in entry.Items
li dish
//while q < i
//li= entry.Items[q]
a(href='http://localhost:3030/index') Input Menu Items
app.listen(3030);
module.exports = app; 有关更完整的视图，请查看code is on GIT
如果我没有按照霍伊尔的说法做这些帖子，我很抱歉。
回答 1
Stack Overflow用户
发布于 2018-10-17 03:36:38
为了让它正常工作，你需要在这个过程中稍微修改一下你的数据。
我们将创建一个对象数组，其中日期作为关键字，碟子数组作为每个日期的属性。我们希望使用数组作为核心对象，因为键顺序不能保证迭代JavaScript对象，但它在数组中。
这样做将使Pug模板很容易遍历，并为您提供您想要的嵌套列表。将复杂的转换逻辑添加到模板本身并不是一个好主意，路由是存储它的最佳位置。
下面是我们想要动态构建的pug友好数组：
[
{
"date": "2018-10-01",
"items": ["Fish", "Green Beans"]
},
{
"date": "2018-10-02",
"items": ["Out to Diner"]
},
{
"date": "2018-10-03",
"items": ["Oysters", "Sauce Mignette"]
}
]下面是如何转换它(我假设你的数据集变量在这里排序，如果没有，那么你需要使用不同的算法来完成这一点)：
var menu = [];
for(var row of dataset){
// see if the date on the current row is the same as the last date in the menu array
if( row.menu_date != menu[menu.length - 1].date ) {
// add new object to the end of the array
menu.push({
"date": row.menu_date,
"items": []
});
}
// add item from current row to the end of the array in the last menu date entry
menu[menu.length - 1].items.push(row.dish_name);
}将菜单变量传递给res.render函数而不是dataset，然后模板可以像这样迭代此对象：
ul
each entry in menu
li= entry.date
ul
each item in entry.items
li= item如果您需要更改此处的逻辑(添加字段、更改列表格式等)或者调试您的代码，保持模板的简单性使其变得非常容易。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52841416
复制相关文章
相似问题