Bootstrap Data Table Type Error: d is undefined

Question

I am trying to construct a data table to display the result of an ajax database call. The JSON object that is returned is correct, and looks like this:

[{"prof_id":"1","0":"1","prof_name":"Cole Test1","1":"Cole Test1","prof_SQL":"JUST SQL JAJA","2":"JUST SQL JAJA","date":null,"3":null},{"prof_id":"2","0":"2","prof_name":"Doobie Doobie","1":"Doobie Doobie","prof_SQL":"my SQL statement to be executed","2":"my SQL statement to be executed","date":null,"3":null},{"prof_id":"3","0":"3","prof_name":"Cole Test 2","1":"Cole Test 2","prof_SQL":"my SQL statement to be executed that is better than the last","2":"my SQL statement to be executed that is better than the last","date":null,"3":null}]

However the data table will not display anything because of a Type Error:

d is undefined

error message in the console. The line number is jquery.dataTables.min.js:62:257 but I have no idea how to read that file and I can't exactly figure out what that means or where the problem is.

Here is the table on the index.php page:

 <div>
    <table id="example" class="display" width="100%">
        <thead>
            <tr>
                <th>
                    prof_id
                </th>
                <th>
                    prof_name
                </th>
            </tr>
        </thead>    
    </table>
    </div>

    <script src="includes/Scripts.js"></script>

This is the Scripts.js file which holds the ajax call:

function fetchQueries(){
       $.ajax({
            type: "GET",
            url: "API.php",
            datatype: "json"  
        }).done(function(returnresult) {
           console.log(returnresult);
           $(".query-div").text(returnresult);

           $('#example').DataTable( {
       "ajax": "API.php",
        "columns": [
            { "data": "prof_id" },
            { "data": "prof_name" }
        ]
    } );
        })
}

fetchQueries()

And lastly here is the API.php file which has the actual database query:

$object = new Dbh; //Create insteance of Dbh
$object->connect(); //Call the connect function to connect to db

$pdo = $object->getPdo(); //Call getPdo from Dbh to get an instance of the pdo

$prof_Query = $pdo->query('SELECT * FROM oogns_quries'); //Creating the db query 
$prof_Query->execute();
echo '{"data"' . json_encode($prof_Query->fetchAll()) . '}';

EDIT::

I found that the issue was that the data the server responded to the ajax call with was not a proper json object. So I entered what it did respond with into JSONLint and found this:

{
    "data" [{
        "prof_id": "1",
        "0": "1",
        "prof_name": "Cole Test1",
        "1": "Cole Test1",
        "prof_SQL": "JUST SQL JAJA",
        "2": "JUST SQL JAJA",
        "date": null,
        "3": null
    }, {
        "prof_id": "2",
        "0": "2",
        "prof_name": "Doobie Doobie",
        "1": "Doobie Doobie",
        "prof_SQL": "my SQL statement to be executed",
        "2": "my SQL statement to be executed",
        "date": null,
        "3": null
    }, {
        "prof_id": "3",
        "0": "3",
        "prof_name": "Cole Test 2",
        "1": "Cole Test 2",
        "prof_SQL": "my SQL statement to be executed that is better than the last",
        "2": "my SQL statement to be executed that is better than the last",
        "date": null,
        "3": null
    }]
}

With Error message:

Error: Parse error on line 2:
{   "data" [{       "prof_id": "1",
---------^
Expecting 'EOF', '}', ':', ',', ']', got '['

But I am not exactly sure how to remedy this problem. Any advice would be great.

Where do you see this error message? In the browser console? Is there a line number or anything? — robbpriestley, Dec 17 '19 at 02:02
Thank you for the reply, I'm sorry I'm just seeing this I had to leave my house. The error message is in the console and this is the line number jquery.dataTables.min.js:62:257 but the result of that is some kind of jquery or json file I assume as I cant really understand it. I can share it with you somehow if you need it. — Cole Perry, Dec 17 '19 at 04:09
Yes, so that's a JavaScript error coming from somewhere in the DataTables internals. It can be difficult to know what is wrong in cases like these. But, the problem is almost certainly in either your initialization code or your ajax statement. The following question is very similar to yours: https://stackoverflow.com/questions/29893207/datatables-typeerror-c-is-undefined — robbpriestley, Dec 17 '19 at 14:49
@ColePerry I believe you need to do it this way [jsfiddle](http://jsfiddle.net/pev9gqdc/13/) — stan chacon, Dec 17 '19 at 16:57
@stanchacon Thank you guys for trying to help. I will try to work on this tonight after work and I will let you all know. — Cole Perry, Dec 17 '19 at 18:24
I edited the question after finding more information and found the actual issue. — Cole Perry, Dec 18 '19 at 03:57

mark_b · Accepted Answer · 2019-12-18T09:08:11.217

1

Try echoing your results like this:

echo '{"data":' . json_encode($prof_Query->fetchAll()) . '}';

Source https://datatables.net/examples/ajax/objects.html (click on the Ajax tab)

edited Dec 18 '19 at 09:08

answered Dec 17 '19 at 12:06

mark_b

1,393
10
18

Thank you for the reply. I am at work right now but I will try this when I get home this evening and let you know how it goes. – Cole Perry Dec 17 '19 at 18:23
1

I followed this step which still gave me an error but led me to find that the data that the server responded to the ajax call with was not a proper json obeject. So I copied the data that it responded with and pasted it in JSON Lint to find that the data is not a in proper format because of this: Error: Parse error on line 2: { "data" [{ "prof_id": "1", ---------^ Expecting 'EOF', '}', ':', ',', ']', got '[' And I'm not sure what to do now – Cole Perry Dec 18 '19 at 03:40
My apologies, I missed a colon out after "data". I have edited my answer. – mark_b Dec 18 '19 at 09:09
Wow this fixed it thank you so much. How do I mark this as solved to give you credit for the fix? – Cole Perry Dec 19 '19 at 02:47
1

[There is a tick underneath the score on the left of the comment.](https://meta.stackexchange.com/a/5235/524032) Click it to make it turn green. To help you understand what happened, from your database query you are returning an array of objects but datatables is expecting an object where one of the properties is an array called "data". Have a look at the documentation sometime and you will see that it is possible to send back other information as well as your array. – mark_b Dec 19 '19 at 09:19

Bootstrap Data Table Type Error: d is undefined

1 Answers1