如何将值从 Node.js 服务器传递到 HTML 页面内的嵌入式 Javascript 代码？答案

【问题标题】：How to pass a value from Node.js server to an embedded Javascript code inside HTML page?如何将值从 Node.js 服务器传递到 HTML 页面内的嵌入式 Javascript 代码？
【发布时间】：2015-10-17 21:53:38
【问题描述】：

我正在做这个项目，我需要将通过 Node js 服务器从 Mysql 数据库带来的数据传递到嵌入了 Javascript 代码的 HTML 页面，以使用该数据通过 Chart.js 库绘制图表。这是 node.js 代码：

var express = require('express');
var router = express.Router();
var mysql = require('mysql');
var plotly = require('plotly')("qzzaz111", "ivonjyk1gd")


var connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : '',
  database : 'arduinodb'
});
var count =false;

connection.connect();
/* GET home page. */
router.get('/', function(req, res, next) {

  connection.query('SELECT * from Patient', function(err, result) {
    if (!err) {

      res.render('index', { title: result});
     console.log('The solution is: ', result);

    }
    else {
        console.log('Error while performing Query.');
    }

这里是 HTML 页面（index.ejs），我想在其中使用脚本中的“标题”数组值来填充图表的“数据”数组

<script src='/javascripts/Chart.min.js'></script>

  <link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>

<canvas id="buyers" width="600" height="400"></canvas>
<br>
<br>

<script>

  var buyerData = {
    labels : ["January","February","March","April","May","June"],
    datasets : [
      {
        fillColor : "rgba(172,194,132,0.4)",
        strokeColor : "#ACC26D",
        pointColor : "#fff",
        pointStrokeColor : "#9DB86D",
        data : [ 87,156,99,251,305,247]
      }
    ]
  }
  var buyers = document.getElementById('buyers').getContext('2d');
  new Chart(buyers).Line(buyerData);
</script>

所以，如果我尝试直接使用“标题”，页面（空白页面）中不会显示任何内容。有什么解决办法吗？

【问题讨论】：

标签： javascript html mysql node.js

【解决方案1】：

如果您的数据库中的数据是 int 数组，请尝试此代码：

<script src='/javascripts/Chart.min.js'></script>

  <link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>

<canvas id="buyers" width="600" height="400"></canvas>
<br>
<br>

<script>

  var buyerData = {
    labels : ["January","February","March","April","May","June"],
    datasets : [
      {
        fillColor : "rgba(172,194,132,0.4)",
        strokeColor : "#ACC26D",
        pointColor : "#fff",
        pointStrokeColor : "#9DB86D",
        data : [<%= title %>]        //here 
      }
    ]
  }
  var buyers = document.getElementById('buyers').getContext('2d');
  new Chart(buyers).Line(buyerData);
</script>

如果您的数据不是需要映射的数组，例如。使用 lodash 地图：

router.get('/', function(req, res, next) {

         connection.query('SELECT * from Patient', function(err, result) {
                     if (!err) {

                         var data = .map(result, function(n) { //here using lodash
                             return n.id;
                         });

                         res.render('index', {
                             title: data
                         });
                         console.log('The solution is: ', result);

                     } else {
                         console.log('Error while performing Query.');
                     }

【讨论】：