如何使用jade和express在脚本标签中动态生成javascript答案

【问题标题】：How can I dynamically generate javascript within a script tag using jade and express如何使用jade和express在脚本标签中动态生成javascript
【发布时间】：2017-06-27 00:10:11
【问题描述】：

我正在尝试为 d3 图动态生成 json 数据。我不确定这是否是最佳策略，但我的尝试本质上是将 d3 代码放在脚本标签中，然后通过 express 传递的对象生成 json。

我的问题是我不确定如何在脚本标签中动态生成 json 数据。如果有更好的代码设计策略来动态生成 json 对象以传递给 d3 以使用jade/pug 生成图表，请告诉我。下面的代码不起作用。

代码如下：

玉码

 //...content above, d3 to draw the graph below

        svg(height="800", width="1000").graph        
        script.
          var svg = d3.select("svg"),
          var data = #{dataObj}; // <--? how do I pass the json data object passed via route.js within the script tag?

...

route.js

let dataObj = {
  "nodes": [
    {"id": "Fantine", "group": 3},
    {"id": "Blacheville", "group": 3},
    {"id": "Favourite", "group": 3},
    {"id": "test", "group": 3},
    ],
    "links": [
    {"source": "Fantine", "target": "Blacheville", "value": 3},
    {"source": "Fantine", "target": "Favourite", "value": 4},
    {"source": "Fantine", "target": "test", "value": 4},
    ]
  };
    res.render('drawGraph', { dataObj});

控制台

Uncaught SyntaxError: Unexpected identifier
var data = [object Object];

提前感谢您的帮助！

【问题讨论】：

标签： javascript node.js express d3.js pug

【解决方案1】：

就像@Stretch0 提到的你缺少对象的关键

res.render('drawGraph', { dataObj: dataObj});

但仅此一项并不能解决问题。您必须在 pug 模板中使用 JSON.stringify 来显示对象

来自

 var data = #{dataObj};

到

var data = !{JSON.stringify(dataObj)};

`#{} 转义字符，因此为了避免转义，您可以使用 !{}

【讨论】：

感谢 JSON.stringify 的回答。请注意，在我使用的 express 版本（最新）中，您不需要使用 dataObj：dataObj。因为它们是同名的，所以我可以单独使用 dataObj 并且它通过了。如果我想使用不同的名称，那么是的，我需要执行类似 myDataObj:dataObj 或 dataObj:{key:value} 之类的操作。如果我传入一个先前声明的对象，它可以正常工作，如问题中所述。

【解决方案2】：

你将一个对象传递给一个没有键的对象。

试试res.render('drawGraph', { dataObj: dataObj});

【讨论】：