如何將值從Node.js服務器傳遞到HTML頁面內的嵌入式Javascript代碼？

Question

我正在從事這個項目，在這個項目中，我需要將通過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），我要在腳本中使用“ title”數組值來填充圖表的“ data”數組

<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>

因此，如果我嘗試直接使用“標題”，則該頁面（空白頁面）中將不會顯示任何內容。 有什么辦法嗎？

Answer 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.');
                     }

如何將值從Node.js服務器傳遞到HTML頁面內的嵌入式Javascript代碼？

問題描述

1 個解決方案

解決方案1
0 已采納 2015-10-17 13:53:38

如何將值從Node.js服務器傳遞到HTML頁面內的嵌入式Javascript代碼？

問題描述

1 個解決方案

解決方案1 0 已采納 2015-10-17 13:53:38

解決方案1
0 已采納 2015-10-17 13:53:38