Jade模板，如何将具体对象传递给页面？

Question

我有一个用于我的Node.js项目的Jade模板。我希望将一个对象发送到该Jade模板，并将其传递给页面内的一个函数（以渲染某些内容）。

我确定我从服务器正确地发送了如下内容：

res.render(__dirname + '/pages/viz.jade', {
    vizJson: newJson,
});

在客户端我会像这样做：

script
    sunburst(#{vizJson})

因此，在脚本函数内部，我想调用一个使用我在服务器端创建的某些JSON创建我的可视化的函数。问题是，渲染时我得到了类似于sunburst([Object object])的东西。我还尝试发送JSON的字符串版本，但是当我执行JSON.parse(#{vizJson})时，它会报错，如Unexpected token &。我发送的JSON始终不同，并且具有不同的深度级别。有人知道该怎么办吗？谢谢

- Masiar

Answer 1

我希望这对某人有所帮助。我是这样解决的：

script
    sunburst(!{JSON.stringify(vizJson)})

注意stringify方法被!和{...}包裹着。

- Masiar

---

我的JSON返回结果如下："{\"some_key\":...}"。这可能是由于我获取原始JSON对象的方式而导致的，但是在此示例中，我将输出包装在一个页面内的JSON.parse("{"some_key":...}")方法中。该对象在浏览器中似乎运行良好。 - hellatan

在执行此操作之前，请确保您的json对象不包含任何未转义的可由用户控制的数据！即使在javascript的文字字符串中，</script>标签也会破坏DOM，并允许任意javascript执行（请参见http://escape.alf.nu/2/）。 - James

感谢你的留言，@James。我猜!{JSON.stringify(vizJson).replace(/</g, '&lt;').replace(/>/g, '&gt;');}可以解决这个问题？ - Simon A. Eugster

有人遇到这个错误 将循环结构转换为JSON 吗？ - hzhu

Answer 2

为了使其正常工作，您需要在服务器上进行字符串化。

res.render(__dirname + '/pages/viz.jade', {
    vizJson: JSON.stringify(newJson),
});

然后，就像你提到的那样，在客户端解析JSON。

script
    sunburst(JSON.parse(#{vizJson}))

希望这能帮到您！

- btford

---

你不需要在客户端调用JSON.parse，因为代码已经在script标签中了。 - fent

很抱歉，那个方法没有奏效。虽然我试过了。无论如何，还是谢谢您，我已经找到了解决方案。 - Masiar

Answer 3

奇怪的是，对我来说解决方案不需要调用JSON.parse。我在服务器上将对象转换为字符串，然后只需使用!{vizJson}方法就可以在客户端获取我的对象。

根据文档，未转义的字符串插值：http://jade-lang.com/reference/interpolation/

- Airswoop1

---

我猜事情在5年内已经发生了变化:)感谢抽出时间张贴这篇文章！ - Masiar

Answer 4

在JS方面，您发送回来

res.render(__dirname + '/pages/viz.jade', {
    vizJson: JSON.stringify(newJson),
});

在HTML方面，我发现类似以下的内容：

JSON.parse( '!{vizJson}' )

工作正常。

- Greg S