Question

我有一个node / express应用程序，并希望将javascript对象传递给浏览器。目前我通过JSON.stringify对象并将其打印到html：

来完成此操作

的Node.js /快递：

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>

如果myObject包含包含'或"的字符串，则会出现问题。 This answer对类似的问题表明，我可以使用replace手动调整字符串化对象，以便正确引用所有内容。

是否有更简单的方法将node.js中的javascript对象传递给浏览器（不做其他请求）？

Answer 1

在模板中，删除JSON.parse。

var myObjectInBrowser = {{{myObjectString}}};

如果您已经将数据编码为JSON，则JavaScript引擎可以直接解析。如果你添加另一个JSON.parse，你就是双解析。

Answer 2

引用my own answer：

我JSON.stringify()我的客户端脚本需要的任何对象，并将其作为HTML5 data-whatever属性插入。 [然后您的客户端脚本只能读取dom属性。]

例如：

//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>

如何将包含带有node.js引号的字符串的javascript对象传递给浏览器？

2 个答案: