Question

我有一個項目，其中當用戶按下提交按鈕時，它將數據「到」和「從」發送到我的服務器上的「/ charts」 .js文件。 （下面是我的一些帕格腳本）。

//index.pug  
form(action="/charts" method="get") 
      select 
        option(value='chart') Chart 
        option(value='report') Report 
      p From: 
        input(type='date' id='from' name='from') 
      p To: 
        input(type='date' id='to' name='to') 
      input(type="submit" value="Submit") 

在服務器端，我希望能夠使用用戶在SQL查詢中剛剛提交的數據，其結果將被作爲JSON到我的客戶端JavaScript這產生了一些谷歌圖表可視化。

//server.js 
app.get('/charts', function(req, res, next) { 

    var to = req.params.to; 
    var from = req.params.from; 

    console.log("Dates /dateRange " + to + " - " + from); 

    //SQL Query 
    connection.query("select date_, count(*) AS 'Total' from (select date(insert_timestamp) date_ from test_table where api_task_type='hifd' AND insert_timestamp BETWEEN '" + from + "' AND '" + to + "')a group by date_ order by date_", function(err, rows, fields){ 
    if(!err){ 
    var table = []; 
    for (var i in rows) { 
      table.push({ 
        date: String(rows[i].date_.getFullYear() + '-' + (rows[i].date_.getMonth() + 1) + "-" + rows[i].date_.getDate()), 
          Record_Count: (rows[i].Total), 
        }); 
      console.log(rows[i]); 
    } 
    console.log("The JSON data is: " + table); 
    res.json(table); 
    } 
}); 

}); 

我遇到的問題是，與發送JSON數據一起，我想我的呈現可視化頁面（chart.pug），但快遞犯規讓您發送多個響應。所以我想這樣的事情：

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

    var to = req.params.to; 
    var from = req.params.from; 

    console.log("Dates /dateRange " + to + " - " + from); 

    //SQL Query 
    connection.query("select date_, count(*) AS 'Total' from (select date(insert_timestamp) date_ from test_table where api_task_type='hifd' AND insert_timestamp BETWEEN '" + from + "' AND '" + to + "')a group by date_ order by date_", function(err, rows, fields){ 
    if(!err){ 
    var table = []; 
    for (var i in rows) { 
      table.push({ 
        date: String(rows[i].date_.getFullYear() + '-' + (rows[i].date_.getMonth() + 1) + "-" + rows[i].date_.getDate()), 
          Record_Count: (rows[i].Total), 
        }); 
      console.log(rows[i]); 
    } 
    var stringtable = JSON.stringify(table); 
    console.log("The JSON data is: " + table); 
    res.json(table); 
    //Render the chart page 
    res.render('chart'); 
    } 
}); 

}); 

任何想法如何實現這一目標？我想發送從SQL查詢中提取的json數據，並一次渲染我的頁面。

編輯

於JavaScript我的代碼如下客戶端：

function drawHorizontalBar() { 

$.getJSON('/charts', function(json) { 

    var newJson = json.map(Object.values); 


    var options = { 
    chart: { 
     title: 'Record Count Over time', 
     chartArea: {width:'100%'} 
    }, 
    height:400, 
    hAxis: { 
     title: 'Record Count', 
     minValue: 0, 
    }, 
    vAxis: { 
     title: 'Date' 
    }, 
    bars: 'horizontal' 
    }; 

    var dataTable = new google.visualization.DataTable(); 
    dataTable.addColumn('string', 'Date'); 
    dataTable.addColumn('number', 'Record Count'); 
    dataTable.addRows(newJson); 

    var material = new google.charts.Bar(document.getElementById('test_div')); 
    material.draw(dataTable, options); 
}); 

} 

如果我使用建議：

res.render('chart', { table: table }); 

如何訪問表中我的客戶方javascript？任何想法

Answer 1

據Express 4個的文檔，你可以使用render方法

// pass a local variable to the view 
res.render('chart', { data: table }, function(err, html) { 
    // ... 
}); 

https://expressjs.com/en/api.html#res.render

然後你就可以訪問客戶端玉/帕格表格傳遞一個變量：

#{data.something} // #{table.something}