javascript - 如何使 Javascript 文件使用发送到 Pug View 的变量

标签 javascript jquery node.js highcharts pug

好的,我正在使用 Node.js 创建一个网站。我正在创建使用 javascript (Highcharts) 的图表,所以我如何知道后端正在将 JSON 数据“随机”发送到 pug 文件,如下所示。

var data = require('../data.json')
router.get('/', function(req, res, next) {
  //console.log(data);

  res.render('random', { title: 'Title', data: data });
});

然后 pug 文件将数据放入 jquery 脚本中以创建图表。我这样做是为了最终可以将功能添加到可以更新 JSON 的位置,但我的问题与此无关。我想知道如何清理我的代码,这样我就可以将脚本与我的所有脚本一起放入 Javascript 文件夹中,而不是将脚本嵌入到 Pug 文件中,然后使用它来创建图表。我遇到的问题是,由于 JSON 被发送到 Pug 文件,单独的 Javascript 文件如何读取该 JSON 数据,从而创建图表。

最佳答案

您可以在常规 JavaScript 中嵌入 Pug 变量; Pug 能够嵌入由 res.render 给出的变量。

在您的示例中,您有一个名为 data 的变量。

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

您需要先对data调用JSON.stringify,否则Pug会将其渲染为[Object object]。当您第一次对 JSON 进行字符串化时,实际上是将其转换为常规 JavaScript 将识别为对象的字符串。如果您要执行typeof data,它将返回object

从那里,要在另一个文件或函数中使用data,您只需将其传递到需要的任何地方即可。

makeChart(data);

关于javascript - 如何使 Javascript 文件使用发送到 Pug View 的变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48593210/

相关文章:

javascript - 多行字符串的无效或意外标记

javascript - 选择图像时显示预览 div

javascript - node.js/Express在高负载下抛出 'RangeError: Maximum call stack size exceeded'

node.js - 有人可以解释一下 GO lang 的架构吗,它比 Nodejs 更快吗?如果是的话,是什么让它更快

javascript - 带有 css 选择器的 addRule/insertRule

javascript - 我如何知道浏览器何时停止重新绘制 DOM 层/节点,因为它们被遮挡了?

javascript - 如何将数据从我的 javascript/php 代码发送到 mySQL 服务器?

c# - cshtml 标签中的使用条件

javascript - 在 JavaScript 中解析

node.js - 新版本的软件包已发布,但未显示在 npm 上,并且用户尚无法安装