Google setOnLoadCallback和Ajax

Question

I am using ajax to hit a URL that serves Json through Node.js/Express. The Json is returned fine, and I have tested it. The data it receives should be plotted in a graph using Google Chart API (Which works fine if the array is hard-coded).

I am recieving 4 unexpected 'Uncaught typeErrors' and would appreciate being pointed in the right direction.

Your assistance is greatly appreciated, and welcomed!

Here is the code in question (I think)

 <!-- <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)

Update - Here is my payload, working from the URL I setup through Express / Node (which makes a call to a MongoDB instance)

[{"_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}]}]

Update After further debugging, I believe the following code is not firing off.

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

Answer 1

The data is undefined with the getData() function. The code you have currently posted is incomplete. Looking at your fiddle there is a line between getData and drawChart functions: getData();
that immediately calls your getData function before the ajax call has been completed. Remove this line and it should work.

• its very hard to see the errors on that picture.
• the errors on that picture relate to the places where the errors are happening so just showing your ajax isnt enough to debug the problem (just for furture reference)
• Its a good idea if things are undefined to check them within the function thats throwing the errors. In this case if you log nData within getData it will probably output undefined - which can lead to where the problem has originated.

edit

    <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']});

then instead of

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

jus have:

drawChart(cols, rows);