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

我正在處理這個項目，在這個項目中，我需要將通過Node js服務器從Mysql數據庫帶來的數據傳遞到嵌入了Javascript代碼的HTML頁面，以便使用此數據通過Chart.js庫來繪製圖表。這是Node.js的代碼：如何將Node.js服務器的值傳遞給HTML頁面中的嵌入式Javascript代碼？

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>

因此，如果我試圖直接使用「標題」，則頁面（空白頁）中不會顯示任何內容。任何解決方案？

來源

2015-10-17 Mushabab Alasmari

試試這個代碼，如果從數據庫中數據類型爲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.'); 
        }

來源

2015-10-17 13:53:38

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

回答

相關問題