我正在用 Express 和 PUG 开发小应用,我想做成这样:
索引.pug
ul#restaurants-list
li
img.restaurant-img(alt='Mission Chinese Food', src='/images/reactchat.png')
h1
=`${name}`
p
='URL : ' + `${url}`
p
=`${explanation}`
a(href=`/${name}`) View Details
索引.js
let express = require('express');
let router = express.Router();
let bodyParser = require('body-parser');
const fs = require('fs');
router.use(bodyParser.json()); // to support JSON-encoded bodies
router.use(bodyParser.urlencoded({ // to support URL-encoded bodies
extended: true
}));
// LowDB Module
const low = require('lowdb');
const FileSync = require('lowdb/adapters/FileSync');
const shortid = require('shortid');
// Save DB in db.json
const adapter = new FileSync('./public/db.json');
const db = low(adapter)
db.defaults({
project: [],
cert: [],
education: []
})
/* GET home page. */
router.get('/', function (req, res, next) {
let data = db.get('project').find().value();
let sid = shortid.generate();
console.log(data);
res.render('index', {
dataarray: data,
id: sid,
name: data.name,
url: data.url,
explanation: data.explanation,
imgurl: data.imgurl
});
});
module.exports = router;
我可以使它成为一个 li 元素并且它可以工作,但我不知道如何像图像一样迭代 li 元素。数据来自 JSON 文件,我通过 lowDB 依赖获得它。
db.json 文件看起来像这样
{
"project": [{
"name": "React Chat App",
"url": "https://sangumee.herokuapp.com/",
"explanation": "THis Project is good",
"imgurl": "images/reactchat.png",
"date": ""
},
{
"name": "React Chat App",
"url": "https://sangumee.herokuapp.com/",
"explanation": "THis Project is good",
"imgurl": "images/reactchat.png",
"date": ""
}
],
"cert": [],
"education": []
}
所以问题是如何在 index.js 中保存多个 json 数据以将其保存到 PUG 文件中。以及如何从 index.js 接收多个数据并将其传播到 li 元素迭代中。
我已经检查了 pug 文档和几个与此问题相关的问题,但我仍然不知道。
最佳答案
您需要像这样使用 each
运算符:( docs )
- var restaurants = dataarray.project
ul#restaurants-list
each restaurant in restaurants
li
img.restaurant-img(alt='Mission Chinese Food', src='/images/reactchat.png')
h1= restaurant.name
p= 'URL : ' + restaurant.url
p= restaurant.explanation
a(href= '/' + restaurant.name) View Details
带有变量声明的第一行将迭代器指向我认为餐馆所在的路线。您也可以在没有额外变量的情况下这样做:
each restaurant in dataarray.project
关于javascript - 带有 JSON 文件的 Express 框架中的 PUG 多次迭代,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52630929/