How to pass an array variable from javascript to a pug file?












0















I am currently learning web development.
I am trying to dynamically fill a page on server side by using pug and javascript.
My Pug code is below



#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 is a mixin, his code is below



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
|


My javascript code is here



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)=>{
});});


I get a valid products list after my request , my problem is during the rendering of the page, it seems that I dont correctly link the data to the pug file. I have searched everywhere but I havent found an answer.



Currently I have this error : SyntaxError: Unexpected character '#'










share|improve this question























  • The error is likely coming from json stringify.

    – evolutionxbox
    Nov 18 '18 at 1:38











  • If i just pass products as an object and access to each item in the pug file like product.name, product.price... I have the same error

    – Boladji Vinou
    Nov 18 '18 at 1:53











  • The schema of a product is this: Schema({ id: { type: Number, unique: true }, name: String, price: Number, image: String, category: String, description: String, features: Array });

    – Boladji Vinou
    Nov 18 '18 at 1:54













  • When does the syntax error occur? During compile of pug code or during runtime of JS?

    – evolutionxbox
    Nov 18 '18 at 1:55











  • Use the debugger tools to figure out where the syntax error is coming from. Your example doesn’t give enough information for us to tell.

    – evolutionxbox
    Nov 18 '18 at 1:56
















0















I am currently learning web development.
I am trying to dynamically fill a page on server side by using pug and javascript.
My Pug code is below



#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 is a mixin, his code is below



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
|


My javascript code is here



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)=>{
});});


I get a valid products list after my request , my problem is during the rendering of the page, it seems that I dont correctly link the data to the pug file. I have searched everywhere but I havent found an answer.



Currently I have this error : SyntaxError: Unexpected character '#'










share|improve this question























  • The error is likely coming from json stringify.

    – evolutionxbox
    Nov 18 '18 at 1:38











  • If i just pass products as an object and access to each item in the pug file like product.name, product.price... I have the same error

    – Boladji Vinou
    Nov 18 '18 at 1:53











  • The schema of a product is this: Schema({ id: { type: Number, unique: true }, name: String, price: Number, image: String, category: String, description: String, features: Array });

    – Boladji Vinou
    Nov 18 '18 at 1:54













  • When does the syntax error occur? During compile of pug code or during runtime of JS?

    – evolutionxbox
    Nov 18 '18 at 1:55











  • Use the debugger tools to figure out where the syntax error is coming from. Your example doesn’t give enough information for us to tell.

    – evolutionxbox
    Nov 18 '18 at 1:56














0












0








0








I am currently learning web development.
I am trying to dynamically fill a page on server side by using pug and javascript.
My Pug code is below



#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 is a mixin, his code is below



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
|


My javascript code is here



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)=>{
});});


I get a valid products list after my request , my problem is during the rendering of the page, it seems that I dont correctly link the data to the pug file. I have searched everywhere but I havent found an answer.



Currently I have this error : SyntaxError: Unexpected character '#'










share|improve this question














I am currently learning web development.
I am trying to dynamically fill a page on server side by using pug and javascript.
My Pug code is below



#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 is a mixin, his code is below



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
|


My javascript code is here



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)=>{
});});


I get a valid products list after my request , my problem is during the rendering of the page, it seems that I dont correctly link the data to the pug file. I have searched everywhere but I havent found an answer.



Currently I have this error : SyntaxError: Unexpected character '#'







javascript express pug






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 18 '18 at 0:59









Boladji VinouBoladji Vinou

53




53













  • The error is likely coming from json stringify.

    – evolutionxbox
    Nov 18 '18 at 1:38











  • If i just pass products as an object and access to each item in the pug file like product.name, product.price... I have the same error

    – Boladji Vinou
    Nov 18 '18 at 1:53











  • The schema of a product is this: Schema({ id: { type: Number, unique: true }, name: String, price: Number, image: String, category: String, description: String, features: Array });

    – Boladji Vinou
    Nov 18 '18 at 1:54













  • When does the syntax error occur? During compile of pug code or during runtime of JS?

    – evolutionxbox
    Nov 18 '18 at 1:55











  • Use the debugger tools to figure out where the syntax error is coming from. Your example doesn’t give enough information for us to tell.

    – evolutionxbox
    Nov 18 '18 at 1:56



















  • The error is likely coming from json stringify.

    – evolutionxbox
    Nov 18 '18 at 1:38











  • If i just pass products as an object and access to each item in the pug file like product.name, product.price... I have the same error

    – Boladji Vinou
    Nov 18 '18 at 1:53











  • The schema of a product is this: Schema({ id: { type: Number, unique: true }, name: String, price: Number, image: String, category: String, description: String, features: Array });

    – Boladji Vinou
    Nov 18 '18 at 1:54













  • When does the syntax error occur? During compile of pug code or during runtime of JS?

    – evolutionxbox
    Nov 18 '18 at 1:55











  • Use the debugger tools to figure out where the syntax error is coming from. Your example doesn’t give enough information for us to tell.

    – evolutionxbox
    Nov 18 '18 at 1:56

















The error is likely coming from json stringify.

– evolutionxbox
Nov 18 '18 at 1:38





The error is likely coming from json stringify.

– evolutionxbox
Nov 18 '18 at 1:38













If i just pass products as an object and access to each item in the pug file like product.name, product.price... I have the same error

– Boladji Vinou
Nov 18 '18 at 1:53





If i just pass products as an object and access to each item in the pug file like product.name, product.price... I have the same error

– Boladji Vinou
Nov 18 '18 at 1:53













The schema of a product is this: Schema({ id: { type: Number, unique: true }, name: String, price: Number, image: String, category: String, description: String, features: Array });

– Boladji Vinou
Nov 18 '18 at 1:54







The schema of a product is this: Schema({ id: { type: Number, unique: true }, name: String, price: Number, image: String, category: String, description: String, features: Array });

– Boladji Vinou
Nov 18 '18 at 1:54















When does the syntax error occur? During compile of pug code or during runtime of JS?

– evolutionxbox
Nov 18 '18 at 1:55





When does the syntax error occur? During compile of pug code or during runtime of JS?

– evolutionxbox
Nov 18 '18 at 1:55













Use the debugger tools to figure out where the syntax error is coming from. Your example doesn’t give enough information for us to tell.

– evolutionxbox
Nov 18 '18 at 1:56





Use the debugger tools to figure out where the syntax error is coming from. Your example doesn’t give enough information for us to tell.

– evolutionxbox
Nov 18 '18 at 1:56












1 Answer
1






active

oldest

votes


















0














First, let's start with the template. You don't have to re-declare variables inside the template, they are already there for you. Also note that if a variable doesn't exist then the each loop won't execute and nothing will be output.



Try this instead:



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


Then, there will also be issues inside the mixin. It expects to see four variables input but the very first line calls product.id which is not one of the variables listed in the mixin definition. It would probably be better just to pass in the entire product object instead of separating it out into separate variables:



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


Which would change your template to this:



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


Finally, you need to pass the entire products list from the route into the template. Simply pass the the entire resultset from the database into the template like this:



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)=>{
});});


This passes the array of products through to the template in a variable named "product_list".






share|improve this answer

























    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53356976%2fhow-to-pass-an-array-variable-from-javascript-to-a-pug-file%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes









    0














    First, let's start with the template. You don't have to re-declare variables inside the template, they are already there for you. Also note that if a variable doesn't exist then the each loop won't execute and nothing will be output.



    Try this instead:



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


    Then, there will also be issues inside the mixin. It expects to see four variables input but the very first line calls product.id which is not one of the variables listed in the mixin definition. It would probably be better just to pass in the entire product object instead of separating it out into separate variables:



    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


    Which would change your template to this:



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


    Finally, you need to pass the entire products list from the route into the template. Simply pass the the entire resultset from the database into the template like this:



    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)=>{
    });});


    This passes the array of products through to the template in a variable named "product_list".






    share|improve this answer






























      0














      First, let's start with the template. You don't have to re-declare variables inside the template, they are already there for you. Also note that if a variable doesn't exist then the each loop won't execute and nothing will be output.



      Try this instead:



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


      Then, there will also be issues inside the mixin. It expects to see four variables input but the very first line calls product.id which is not one of the variables listed in the mixin definition. It would probably be better just to pass in the entire product object instead of separating it out into separate variables:



      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


      Which would change your template to this:



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


      Finally, you need to pass the entire products list from the route into the template. Simply pass the the entire resultset from the database into the template like this:



      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)=>{
      });});


      This passes the array of products through to the template in a variable named "product_list".






      share|improve this answer




























        0












        0








        0







        First, let's start with the template. You don't have to re-declare variables inside the template, they are already there for you. Also note that if a variable doesn't exist then the each loop won't execute and nothing will be output.



        Try this instead:



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


        Then, there will also be issues inside the mixin. It expects to see four variables input but the very first line calls product.id which is not one of the variables listed in the mixin definition. It would probably be better just to pass in the entire product object instead of separating it out into separate variables:



        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


        Which would change your template to this:



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


        Finally, you need to pass the entire products list from the route into the template. Simply pass the the entire resultset from the database into the template like this:



        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)=>{
        });});


        This passes the array of products through to the template in a variable named "product_list".






        share|improve this answer















        First, let's start with the template. You don't have to re-declare variables inside the template, they are already there for you. Also note that if a variable doesn't exist then the each loop won't execute and nothing will be output.



        Try this instead:



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


        Then, there will also be issues inside the mixin. It expects to see four variables input but the very first line calls product.id which is not one of the variables listed in the mixin definition. It would probably be better just to pass in the entire product object instead of separating it out into separate variables:



        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


        Which would change your template to this:



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


        Finally, you need to pass the entire products list from the route into the template. Simply pass the the entire resultset from the database into the template like this:



        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)=>{
        });});


        This passes the array of products through to the template in a variable named "product_list".







        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Nov 18 '18 at 17:07

























        answered Nov 18 '18 at 17:01









        GrahamGraham

        3,582143559




        3,582143559






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53356976%2fhow-to-pass-an-array-variable-from-javascript-to-a-pug-file%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            這個網誌中的熱門文章

            Xamarin.form Move up view when keyboard appear

            Post-Redirect-Get with Spring WebFlux and Thymeleaf

            Anylogic : not able to use stopDelay()