How to pass a Pug JSON object to client side JavaScript

Question

I am trying to pass a JSON object from pug to client side JavaScript. Here's how the code is structured. I render a JSON object and pass it to Pug from my Node-Express backend. Code below:

server.js:

app.get('/myrooms', function(req, res) {
    Room.find()
        .where('_id')
        .in(user.rooms)
        .exec(function (err, records) {
            res.render('rooms/index', {myrooms : records})
        })
})

After that this object is available in my pug file. Now I want to pass it to a client side script. I am doing something like this in my index.pug file.

index.pug:

script(src='/js/play.js').
    trooms = "#{myrooms}"

play.js:

console.log(trooms)

It gives me 'troom is not defined' error. I don't know how I can pass this object. According to some old post this was working in jade. However, I am using the pug version 2.0.0-rc.2.

You have to out the trooms = "#{myrooms}" before you source the script. — lxe
– lxe, Commented Aug 11, 2017 at 22:28
Also, need to call JSON.parse('#{myrooms}') to convert JSON to object. — alexmac
– alexmac, Commented Aug 11, 2017 at 22:36
I have tried doing JSON.parse('#{myrooms}') that but it did not work. — Shadid
– Shadid, Commented Aug 12, 2017 at 1:20

Popoi Menenet · Accepted Answer · 2017-08-15 01:38:03Z

12

You can try

var trooms = !{JSON.stringify(myrooms)}

answered Aug 15, 2017 at 1:38

Popoi Menenet

1,0581 gold badge9 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Shadid Over a year ago

I revert it back to older version of jade and this works. I will work with this for now

Collectives™ on Stack Overflow

How to pass a Pug JSON object to client side JavaScript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related