Как отобразить массив с сервера Express на Pug и отобразить его - PullRequest
Новая
       16

Как отобразить массив с сервера Express на Pug и отобразить его

0 голосов
/ 09 мая 2019

Необходимо отобразить массив пользователей в шаблон pug, но он не работает.

users.pug 

*
*
*
each user in userList
   tr
      td= user.name
      td= user.address
      td= user.age
*
*
*

код на стороне сервера 

logger.Debug(JSON.stringify(data));
res.render('users.pug', { userList:JSON.stringify(data)});

прия выполняю код на стороне сервера, оператор logger.Debug () генерирует следующее: 

[{"name":"ABC","address":"London","age":"30"}, {"name":"DEG","address":"USA","age":"25"},
{"name":"XYZ","address":"India","age":"35"}]

Но рендеринг того же userList для pug не работает.Это рендеринг пробелов

Пожалуйста, кто-нибудь может помочь и предложить какой-то обходной путь здесь.

Ответы [ 2 ]

0 голосов
/ 09 мая 2019

На стороне вашего сервера убедитесь, что вы определили view-engine как pug, и убедитесь, что файлы шаблонов находятся в папке представлений на корневом уровне

пример: 

const express = require('express');
const app = express();    
app.set('view engine', 'pug');

Затем попробуйте,он должен работать.

Примечание. Согласно комментариям Марка Мейера, добавьте таблицу к вашему коду, иначе она не будет печатать каждую строку в одной строке.Убедитесь, что у вас есть # {} для подстановки динамических переменных. 

block content
   table  
    each user in userList
      tr.person
        td #{user.name} 
        td #{user.age}
0 голосов
/ 09 мая 2019

Вот рабочая версия.

Две вещи, которые я изменил:

  1. Добавил элемент <table> в шаблон (и удалил *, который, я полагаю, является наполнителем)
  2. Передайтефактический объект в шаблоне, а не строка 

const pug = require('pug');

let template = `
table
  each user in userList
    tr
     td= user.name
     td= user.address
     td= user.age
`

const compiledFunction = pug.compile(template);
let data = [{"name":"ABC","address":"London","age":"30"}, {"name":"DEG","address":"USA","age":"25"},
{"name":"XYZ","address":"India","age":"35"}]


let html = compiledFunction({
  userList: data
});

document.getElementById('data').innerHTML = html
<script src="https://pugjs.org/js/pug.js"></script>
<div id="data"></div>
...