CODEWITHSUNDEEP
javascriptnode.jsexpresspug
koala1838
koala1838

Reputation: 47

How to access the into PUG passed object inside of an inline script without converting

Is it possible to access the whole object, which is passed into PUG, inside of an inline script without converting it with !{JSON.stringify(object)};

 // renderController.js
 res.render('../events', {
    events: {[ {...}, {...}, ... ]},
  });

Using !{JSON.stringify(events)}; converts existing date-objects to strings, which than needs to be converted back.

Wanted behavior:

 // events.pug
 script.
     console.log(events[0].date.toLocaleString());

Upvotes: 0

Views: 438

Answers (2)

user1592129
user1592129

Reputation: 493

object is only defined in your Pug template and used to generate HTML that is then sent to the browser.

But what can do is send your JSON as an attribute of your main tag, like

<div class="container" id="data-container" data-demo="Your-JSON-Data">
  ...
  ...
</div>

<script>
 const dataAsString = JSON.parse( $("#data-container").attr("demo"));

</script>

Upvotes: 1

jfriend00
jfriend00

Reputation: 707298

Is it possible to access the whole object, wich is passed into PUG, inside of an inline script without converting it?

No, it is not. Your inline script runs in the browser. The object you passed to the Pug script existed only on the server and is long gone and was never available in the browser.

So, as you seem to already know, the only way to share data like that from the server to an inline script that runs in the browser is to put the data into a Javascript variable in the page itself and the easiest way to do that is to "render" it to JSON in some variable definition inside a script in the page. That will then establish a variable within the inline script that contains the desired data.

Note, that the data must be serializable to JSON for this to work. Some things such as server-side socket objects cannot be transferred to the front-end in this way because they contain references to native objects which can't be converted to JSON and wouldn't be useful on a different computer anyway.

Upvotes: 1

Related Questions