首页 > 解决方案 > 在 pug 脚本标签中存储 nodejs 对象

问题描述

我有一些对象需要渲染/存储在我的 pug 文件中,以便以后在客户端 JS 脚本中使用。

要将对象存储在脚本标记中,我将使用此处此处描述的方法:

NodeJS 变量

const object = {
    "someKey": {
        "message":"this works"
    }
}
res.render("index", {object});

哈巴狗(文件中的某处 - 注意脚本标记后的 . )

另请注意,我使用的是双引号 - 您可以使用单引号,但我稍后会提到这一点

script.
    var object = JSON.parse("!{JSON.stringify(object)}")

然后在你的 javascript 脚本中的某个地方

alert(object.someKey.message)

在此处阅读有关 Pug 插值的更多信息。

问题:

对于我所有的用途,上面的例子都很好。当我有一个内部带有单引号的对象时,问题就出现了:

const object = {
    "someKey": {
        "message":"this doesn't work"
    }
}

Javascript 不喜欢单引号这一事实,因为它将单引号视为对象键/值的开始/结束:

从Chrome 控制台获取此信息 在此处输入图像描述

原因: 在此处输入图像描述

删除这个单引号解决了这个问题。当达到这一点时,JSON.parse()函数抛出异常并停止加载任何和所有 JS,因此,没有其他函数起作用。一种解决方法是将其放在页面的最后,但这并不能解决问题。

问题:

如何使用单引号将 NodeJS 中的对象传递给 pug(如上所示)?


更新

使用标准 NodeJS 的问题 MCVE 表示样板

https://github.com/cybex-dev/pug-single-quote-isse

设置说明:

git clone https://github.com/cybex-dev/pug-single-quote-isse
npm install 
npm start

你应该看到期望看到一些控制台输出,我只是看到:

在此处输入图像描述

和“错误线”

在此处输入图像描述

标签: javascriptnode.jsexpresspug

解决方案


我无法重现您的工作示例:

script.
    var object = JSON.parse("!{JSON.stringify(object)}")

但对我有用的是:

script.
    var object = !{JSON.stringify(object)};
    console.log(object.someKey.message);

没有双引号:var object = !{JSON.stringify(object)}


推荐阅读