Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/464.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在快速路线之间传递数据,以创建两个响应_Javascript_Node.js_Express_Google Visualization_Pug - Fatal编程技术网

Javascript 在快速路线之间传递数据,以创建两个响应

Javascript 在快速路线之间传递数据,以创建两个响应,javascript,node.js,express,google-visualization,pug,Javascript,Node.js,Express,Google Visualization,Pug,我有一个项目,当用户按下submit按钮时,它会在我的服务器(express.js)上发送数据“to”和“from”到“/charts”。(以下是我的一些哈巴狗脚本) 在服务器端,我希望能够使用用户刚刚在SQL查询中提交的数据,查询结果将作为JSON发送到我的客户端JavaScript,后者将创建一些google图表可视化 //server.js app.get('/charts', function(req, res, next) { var to = req.params.to;

我有一个项目,当用户按下submit按钮时,它会在我的服务器(express.js)上发送数据“to”和“from”到“/charts”。(以下是我的一些哈巴狗脚本)

在服务器端,我希望能够使用用户刚刚在SQL查询中提交的数据,查询结果将作为JSON发送到我的客户端JavaScript,后者将创建一些google图表可视化

//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),但express不允许您发送多个响应。所以我想说:

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中访问表?任何想法

根据Express 4文档,您可以在渲染方法中传递一个变量

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

然后,您可以使用以下方式访问客户端Jade/Pug中的表:

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

请不要在生产中使用此代码,因为HTTP不允许您返回多个响应(至少不是这样)。但是您是否考虑过将
table
作为变量传递到模板
res.render('chart',{table:table})
?@yellowsir对于代码的(非)安全性提出了一个很好的观点。如果我使用res.render('chart',{table:table}),那么我能在客户端javascript上访问它吗?我需要把它放在那里创建我的谷歌可视化。谢谢@yellowshir我会解决的@AlanDev1989您需要将其呈现为客户端变量。这里有一个简单的例子:@robertklep谢谢,我想知道如何在javascript端使用这个变量?我已经编辑了我的问题以包含这一点。
#{data.something} // #{table.something}