Как передать переменную массива из JavaScript в файл мопса? - PullRequest
Новая
       28

Как передать переменную массива из JavaScript в файл мопса?

0 голосов
/ 18 ноября 2018

Я сейчас изучаю веб-разработку. Я пытаюсь динамически заполнить страницу на стороне сервера с помощью мопса и JavaScript. Мой код мопса ниже 

#products-list.products 
    - var product_list = #{product_list}
    -if(product_list)
      each product in product_list
        +product_element(product['name'],product['price'],product['image'])

product_element - миксин, его код ниже 

mixin product_element(name,prod_price,image)
a(href='./produits/${product.id}' title='En savoir plus...')
h2= name
img(alt='product' src='./assets/img/'+image)
p.price= prod_price
  small Prix
  |

Мой код JavaScript здесь 

router.get("/produits", (req, res) => {dataBase.getProducts(null,null).then(
(products)=>{
  if(products)
  {
    console.log('Get /produits sending..');
    res.render("products", {
                            titre: "OnlineShop - Produits", 
                            products_count: products.length+" produits",
                            products_list:JSON.stringify(products)
                            });
  }
}).catch(
(err)=>{
});});

Я получаю действительный список продуктов после моего запроса, моя проблема во время визуализации страницы, кажется, что я неправильно связываю данные с файлом pug. Я искал везде, но я не нашел ответа.

В настоящее время у меня есть эта ошибка: SyntaxError: Неожиданный символ '#'

1 Ответ

0 голосов
/ 18 ноября 2018

Во-первых, давайте начнем с шаблона. Вам не нужно повторно объявлять переменные внутри шаблона, они уже есть для вас. Также обратите внимание, что если переменная не существует, цикл each не будет выполняться и ничего не будет выведено.

Попробуйте вместо этого: 

#products-list.products 
  each product in product_list
    +product_element(product['name'],product['price'],product['image'])

Тогда также будут проблемы внутри миксина. Он ожидает увидеть четыре переменные ввода, но самая первая строка вызывает product.id, что не является одной из переменных, перечисленных в определении mixin. Вероятно, было бы лучше просто передать весь объект продукта, а не разделять его на отдельные переменные: 

mixin product_element(product)
a(href= './produits/' + product.id title='En savoir plus...')
  h2= product.name
  img(alt='product' src='./assets/img/'+ product.image)
  p.price= product.price
    small Prix

Что изменит ваш шаблон на это: 

#products-list.products 
  each product in product_list
    +product_element(product)

Наконец, вам нужно передать весь список продуктов из маршрута в шаблон. Просто передайте весь набор результатов из базы данных в шаблон следующим образом: 

router.get("/produits", (req, res) => {dataBase.getProducts(null,null).then(
(products)=>{
  if(products)
  {
    console.log('Get /produits sending..');
    res.render("products", { "product_list": products });
  }
}).catch(
(err)=>{
});});

Это передает массив продуктов в шаблон в переменной с именем "product_list".

...