CODEWITHSUNDEEP
javascriptnode.jspugjs
Jorge Mejia
Jorge Mejia

Reputation: 1163

How to pass an object from pug to front end javascript

I´m using pug and I want to pass a variable to the front end for information, but when I´m trying to do that it pass like a text.

This is how I do that.

Controller code:

res.render('view/edit', {
     title: 'Title',
     sub:true,
     data: variableObject
 });

This is the code in the rendered view:

script(type='text/javascript').
    var x = "#{data}"
    console.log(x);

And this is the result of the log

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

I can´t access to the object because is text, is there a way to pass the object like an object?

Upvotes: 17

Views: 10988

Answers (2)

dNitro
dNitro

Reputation: 5345

First stringify your object using JSON.stringify:

res.render('view/edit', {
     title: 'Title',
     sub: true,
     data: JSON.stringify(variableObject)
 });

Then use String Interpolation, Unescaped !{data}

script(type='text/javascript').
    var x = !{data}
    console.log(x);

Or just do it all once, in your template:

script(type='text/javascript').
    var x = !{JSON.stringify(data)}
    console.log(x);

(kudos to @Matt, Thanks)

Upvotes: 23

Jorge Mejia
Jorge Mejia

Reputation: 1163

In this case I used this:

var x = "#{ JSON.stringify(y) }"
   console.log( JSON.parse(x.replace(/"/g,'"')) );

I´m not sure if this is the best practice.

Upvotes: 4

Related Questions