如何使 Javascript 文件使用发送到 Pug 视图的变量答案

【问题标题】：How to make Javascript file use variable that was sent to Pug view如何使 Javascript 文件使用发送到 Pug 视图的变量
【发布时间】：2018-07-13 13:49:39
【问题描述】：

好的，我正在使用 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 的位置，但我的问题与此无关。我想知道如何清理我的代码，而不是将脚本嵌入到 Pug 文件中，我可以将脚本与我的所有脚本一起放在 Javascript 文件夹中，然后使用它来创建图表。我遇到的问题是，由于 JSON 被发送到 Pug 文件，单独的 Javascript 文件如何读取该 JSON 数据，从而创建图表。

【问题讨论】：

如果它是所有服务器端编程，您只需在文件顶部使用whatever = require('whatever') 来包含它，如果不是这种情况，那么您可以使用AJAX 请求如果您想动态地在客户端检索文档，否则您可以使用标记导入以与客户端 javascript 一起加载到内存中。您还可以编写一个控制器脚本来运行所有其他脚本并协调它们的行为，这将包括运行需要另一个脚本的脚本。请注意，您必须包含 Module.exports 语句才能导出

标签： javascript jquery node.js highcharts pug

【解决方案1】：

您可以在常规 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);

【讨论】：