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

Question

好的，所以我正在使用Node创建一个网站。 我正在创建使用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数据，从而创建图表。

Answer 1

您可以在常规JavaScript中嵌入Pug变量； Pug可以嵌入从res.render获得的res.render 。

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

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

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

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

makeChart(data);