使用AJAX / Jquery使用MongoDB投影填充Google Chart
我刚刚在网站上完成了关于nodejs的MongoDB 教程 ，并试图构build一个非常简单的testing用例，通过AJAX将查询结果发送到Google Chart。
这里是我用来生成查询的nodejs文件：
码：
var MongoClient = require('mongodb').MongoClient, assert = require('assert'); MongoClient.connect('mongodb://localhost:27017/crunchbase', function(err, db) { assert.equal(err, null); console.log('The app is now running'); var query = {name: { $regex: /^m/}, founded_year: { $gte: 2009 }}; var projection = {name: 1, founded_year: 1, _id: 0}; var cursor = db.collection('companies').find(query); cursor.project(projection); }); 我用来将光标加载到谷歌图表的例子来自这个页面 。
这里是我用来生成图表的示例代码：
码：
<!DOCTYPE html> <html lang="en"> <head> <!--Load the AJAX API for Google Charts- --> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['table']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var jsonData = $.ajax({ url: "http://localhost:27017/crunchbase", dataType: "jsonp", asynchronous: true }).responseText; var data = new google.visualization.DataTable(jsonData); var chart = new google.visualization.Table(document.getElementById("chartDiv")); chart.draw(data); } </script> </head> <body> <h1 style="text-align: center">Companies Starting With "M" Founded After 2009</h1> <div id="chartDiv"> </div> </body> </html>
我目前在控制台中得到这个错误信息：
错误消息：
Uncaught SyntaxError: Unexpected identifier crunchbase?callback=jQuery1102076…_1481945533315&_=1481945533316:1
另外值得注意的是：为了让错误消息消失，我将dataType改为jsonp并将其asynchronous为true ，但这些违反了Google Charts示例给出的例子，所以这可能是相关的。
我很抱歉，如果我的代码有点粗糙，这实际上只是试图从MongoDB和谷歌图表文档中的非常基本的例子，并让他们的工作。
当asynchronous: true – >需要等待请求完成时，
在尝试使用数据/绘制图表之前
请参阅.done – 尝试下面的代码片段…
google.charts.load('current', {'packages':['table']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { $.ajax({ url: "http://localhost:27017/crunchbase", dataType: "jsonp", asynchronous: true }).done(function (jsonData) { var data = new google.visualization.DataTable(jsonData); var chart = new google.visualization.Table(document.getElementById("chartDiv")); chart.draw(data); }).fail(function (jqXHR, textStatus, errorMessage) { console.log(errorMessage); }); }