I am new to pug and now I am trying to render a html view which contains a table whose entries are parsed from app.js
this is my index.pug
doctype html
html(lang='en')
head
title Pug
body
table
- var columns = ['apple', 'pine', 'peach'];
tr
each column in columns
th #{column}
- for (var i = 0; i < 3; i++)
tr
each column in columns
td #{data[i].column}
here is my app.js
const express = require('express');
const pug = require('pug')
var app = module.exports = express();
app.set('view engine', 'pug');
var foo = [{
apple: 1,
pine: 2,
peach: 3
}, {
apple: 4,
pine: 5,
peach: 6
},
{
apple: 7,
pine: 8,
peach: 9
}
];
app.get('/', (req, res) => {
res.render('index', {
data: foo
});
});
app.listen(3000, () => console.log('Listen to port 3000 now'));
I am not sure how should I do the following trick: inside index.pug
I do declare a local js array of three possible values apple
, pine
and peach
, and I am use a for-each loop to iterate over this array. However, in the last line of pug, it seems like that pug doesn't substitute the "column" in #{data[i].column}
with apple
, pine
and peach
as the loop is iterating over.
So is there a way to tell pug to replace column
in #{data[i].column}
with the values of same local js variable that I have declared?
Thanks
Check your local variable value and server side variable value is same using if statement and based on that you can give the value to td
of local variable column
table
- var columns = ['apple', 'pine', 'peach'];
tr
each column in columns
th #{column}
- for (var i = 0; i < 3; i++)
tr
each column in columns
if column == data[i].column
td column
Use
html(lang='en')
head
title Pug
body
table
- var columns = ['apple', 'pine', 'peach'];
//- - var columns = Object.keys(data[0]); // Could also use this
tr
each column in columns
th=column
- for (var i = 0; i < 3; i++)
tr
each column in columns
td=data[i][column]
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.