javascript - 带有 JSON 文件的 Express 框架中的 PUG 多次迭代

Question

我正在用 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 文档和几个与此问题相关的问题，但我仍然不知道。

Answer 1

您需要像这样使用 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