Многократная итерация PUG в Express Framework с файлом JSON - PullRequest
Новая
       11

Многократная итерация PUG в Express Framework с файлом JSON

0 голосов
/ 03 октября 2018

Я занимаюсь разработкой небольшого приложения для Express и PUG и хочу сделать так:

enter image description here

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.

Я уже проверял документ pug и несколько вопросов, связанных с этой проблемой, но все еще не имею представления.

1 Ответ

0 голосов
/ 03 октября 2018

Вам нужно использовать оператор each следующим образом: ( документы ) 

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