17

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?

Jorge Mejia
  • 1,153
  • 1
  • 10
  • 27

2 Answers2

24

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)

dNitro
  • 5,145
  • 2
  • 20
  • 45
  • If the string contains `` this will create problems because the browser will think it's the closing tab of the opening ` – hytromo Feb 13 '18 at 21:25
  • is there a way to do this the opposite way? pug allows say with an dynamic array that is created after the page renders? – Josh Sharkey Nov 08 '20 at 17:13
4

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.

Jorge Mejia
  • 1,153
  • 1
  • 10
  • 27