谷歌setOnLoadCallback和Ajax

时间:2015-07-07 19:22:48

标签: javascript jquery ajax json google-visualization

我正在使用ajax来点击通过Node.js / Express为Json提供服务的URL。 Json被罚款了,我已经测试过了。它接收的数据应使用Google Chart API绘制在图表中(如果阵列是硬编码的,则可以正常工作)。

我正在收到4个意想不到的' Uncaught typeErrors'并希望被指向正确的方向。

非常感谢您的协助,欢迎您!

enter image description here

以下是相关代码(我认为)

 <!-- <script>
            var nData;
        $(document).ready(function() {
            $.ajax({
                url: 'http://localhost:3000/renderedJson',
                type: 'GET',
                dataType: 'json',
                data: [],
                success:function(data){
                nData = data;
                console.log("success");
                console.log(nData);
                }
            })
            .done(function() {
                console.log("done");
                getData();
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
            });
        </script>

Here is an example (with hard coded data, working! To see, comment the ajax request and uncomment the hardcoded variable)

更新 - 这是我的有效负载,使用我通过Express / Node设置的URL(调用MongoDB实例)

[{"_id":"559c27abe01e815c0f7b69d3","date":"2015-01-2","one":[{"a":9},{"b":8},{"c":7},{"d":6},{"e":5},{"f":4},{"g":3}],"two":[{"h":2},{"i":1}]},{"_id":"559c27abe01e815c0f7b69d2","date":"2015-01-1","one":[{"a":1},{"b":2},{"c":3},{"d":4},{"e":5},{"f":6},{"g":7}],"two":[{"h":8},{"i":9}]}]

更新经过进一步调试后,我认为以下代码未启动。

 google.setOnLoadCallback(function() {
console.log('loaded google 1');
drawChart(cols, rows);
console.log('loaded google 2');
});

1 个答案:

答案 0 :(得分:0)

使用getData()函数未定义数据。您当前发布的代码不完整。看着你的小提琴,getDatadrawChart函数之间有一条线:         getData();
在ajax调用完成之前立即调用getData函数。删除此行,它应该工作。

  • 很难看到那张照片上的错误。
  • 错误 图片与发生错误的地方有关 显示你的ajax不足以调试问题(只是为了进一步 参考)
  • 如果事情未定义来检查它们,这是一个好主意 在抛出错误的函数内。在这种情况下,如果你 在nData内记录getData,它可能会输出undefined - 这可能导致问题的起源。

修改

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    google.load('visualization', '1.1', {packages: ['line']});

然后代替

google.load('visualization', '1.1', {packages: ['line']});
google.setOnLoadCallback(function() {
    drawChart(cols, rows);
});

jus有:

drawChart(cols, rows);