Question

我正在使用Express和PUG开发小型应用程序，我想这样做：

index.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

index.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": []
}

所以问题是如何将多个json数据保存在index.js中以将其保存到PUG文件中。以及如何从index.js接收多个数据并将其分散在li元素迭代中。

我已经检查了哈巴狗文档以及与该问题有关的几个问题，但我仍然不知道。

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

使用JSON文件在Express Framework中进行PUG多次迭代

1 个答案: