我想使用Node.js为Google图表呈现的值

我想使用Node.js为Google图表呈现的值。

但是，我不能成功地将服务器端呈现的variables传递给客户端的JavaScript。

我正在使用Node.js，Express和帕格。 这是代码。

HTML（index.pug）

script(type='text/javascript', src='https://www.gstatic.com/charts/loader.js') #chart_div 

我用JavaScript中的“testing”variables如下，但它不好

JavaScript的

 google.charts.load('current', {packages: ['corechart', 'line']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('number', 'X'); data.addColumn('number', 'Dogs'); for(var test of tests) { data.addRows([test]); } var options = { hAxis: { title: 'Time' }, vAxis: { title: 'Popularity' } }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); } 

Node.js的

 var tests = [[0, 0],[1, 10],[2, 23],[3, 17],[4, 18]]; res.render('index', { tests: tests }); 

我如何将“testing”variables传递给客户端的JavaScript？

Answer 1

为了在页面中定义一个服务器端Javascriptvariables，您必须插入PUG语法，该语法将该JavaScriptvariables定义呈现到您的页面中。 对于你的testsvariables，你可以在你的模板中添加这样的内容：

 script. var tests = #{tests}; 

而且，将您传入模板的内容更改为：

 res.render('index', { tests: JSON.stringify(tests) }); 

然后，当页面呈现时，它将显示为：

 <script> var tests = [[0, 0],[1, 10],[2, 23],[3, 17],[4, 18]]; </script> 

而你的variables将在你的页面中定义。

你也不需要单独定义variables，只要把#{tests}放到你想要使用该值的Javascript中间，并将数组直接插入需要的地方即可。 它将以任何方式工作。

---

PS你永远不应该使用for/in迭代一个数组，因为它迭代了对象的所有属性，而不仅仅是有时会工作的数组条目，但不一定总是（可能包括对象的其他属性）。 在ES5中，使用传统for(var i = 0; i < array.length; i++)循环或使用.forEach() 。 在ES6中， for/of 。