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

Question

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

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

代码如下:

Jade 码

 //...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];

预先感谢您的帮助!

Answer 1

就像 @Stretch0 提到的，你缺少对象的 key

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

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

来自

 var data = #{dataObj}; 

至

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

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