How to pass a javascript object that contains strings with quotes from node.js to the browser?

Question

I have a node/express application and want to pass a javascript object to the browser. Currently I do this by JSON.stringifying the object and printing it into the html:

Node.js/express:

var myObject = /* loaded from db, might look like this: */
               {something: "that has 's and \"s"},
    myObjectString = JSON.stringify(myObject);
...
res.render('my-template', {..., myObjectString: myObjectString});

my-template.handlebars:

<html>
...
<script type="text/javascript">
  var myObjectInBrowser = JSON.parse('{{{myObjectString}}}');
  /* do something to the DOM based on myObjectInBrowser */
</script>
</html>

This leads to problems if myObject contains strings that contain ' or ". This answer to a similar question suggests that I could use replace to manually adjust the stringified object to get everything quoted correctly.

Is there a simpler way to pass a javascript object from node.js to the browser (without doing another request)?

Why can't you send json that isn't stringified? Can you give a bit more context? — Josh C.
– Josh C., Commented Jun 13, 2014 at 2:52
@JoshC. Because you can't pass an object from the back-end to the front in a different way. — Etheryte
– Etheryte, Commented Jun 13, 2014 at 2:55
As for the actual question, just escape the necessary characters? — Etheryte
– Etheryte, Commented Jun 13, 2014 at 2:56
@Nit If node is serving a request, and the response if application/json, it doesn't need to be stringified, right? Also, I'm not sure how this relates to node. — Josh C.
– Josh C., Commented Jun 13, 2014 at 2:58
If this question is "how to get handlebars to use a JSON object for templating", why doesn't res.render() work? — Josh C.
– Josh C., Commented Jun 13, 2014 at 3:00

Brad · Accepted Answer · 2014-06-13 05:26:12Z

4

In your template, remove the JSON.parse.

var myObjectInBrowser = {{{myObjectString}}};

If you've already encoded the data as JSON, this is directly parseable by the JavaScript engine. If you add another JSON.parse to that, you are double-parsing.

answered Jun 13, 2014 at 5:26

Brad

164k57 gold badges381 silver badges559 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:34:23Z

0

Quoting my own answer:

I JSON.stringify() any objects that my client scripts need and insert it as HTML5 data-whatever attributes. [then your client script can just read the dom attribute.]

For example:

//app.js
app.get('/map', function(req, res){
  var data = {
    id: '1234',
    LL: {
      lat: 42.1,
      lng: 80.8,
  };
  res.locals.docsJSON = JSON.stringify([data]);
  res.render('locations/index');
});

//jade
!!!
html
  body(data-locations=locals.docsJSON)
  script
    var docs = JSON.parse($('body').attr('data-locations'));
    console.log(docs[0].LL);

//html output
<html> <body data-locations='{"id":"1234","LL":{"lat":42.1,"lng":80.8}}'>
<script> var docs = JSON.parse($('body').attr('data-locations'));  console.log(docs[0].LL); </script>
</body></html>

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Jun 13, 2014 at 5:35

Plato

11.1k2 gold badges46 silver badges63 bronze badges

2 Comments

Plato Over a year ago

I take this approach because it feels cleaner to me to attach data to a relevant dom object than to dynamically generate javascript code

Brad Over a year ago

It feels cleaner to you to attach data to HTML, then pull it out from the HTML, then parse it, than it is to just parse it in the first place?

Collectives™ on Stack Overflow

How to pass a javascript object that contains strings with quotes from node.js to the browser?

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related