Why does jQuery DataTables not understand this basic JSON array?

Question

I'm currently pulling my hair out trying to get jQuery Datatables to work with a very simple json array. To my mind the output json matches the simple ajax example on the datatables site:

"{\"data\":[[\"Row1\",\"0\",\"1\",\"1\",\"2\",\"6\",\"0\",\"1\"],[\"Row2\",\"16\",\"11\",\"13\",\"13\",\"16\",\"2\",\"5\"],[\"Row3\",\"0\",\"1\",\"1\",\"0\",\"1\",\"0\",\"0\"],[\"Row4\",\"14\",\"8\",\"19\",\"16\",\"24\",\"3\",\"0\"],[\"Row5\",\"4\",\"0\",\"2\",\"1\",\"2\",\"2\",\"1\"]]}"

The only difference really is the fact that the output from my api is being escaped which I can't really help as it's being generated by JSON.NET. When debugging datatables in chrome I get a 'Uncaught TypeError: Cannot read property 'length' of undefined' exception.

Here is my HTML/JavaScript:

<script type="text/javascript">
$(document).ready(function() {
    $('#incVolumes').dataTable( {
        "ajax":"http://localhost/API/Reporting/Volumes"
    } );
} );
</script>
<table id="incVolumes" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Worksource</th>
                <th>Col1</th>
                <th>Col2</th>
                <th>Col3</th>
                <th>Col4</th>
                <th>Col5</th>
                <th>Col6</th>
                <th>Col7</th>
            </tr>
        </thead>

    </table>

I usually have to use Json.Parse to pass something like this to a jQuery plugin, but as I understand it datatables takes care of that anyway?

So my question is can anyone see where I'm going wrong?

If the JSON is escaped like that it isn't valid JSON. Unless that's just the way the string is represented in your debugger. — nnnnnn
– nnnnnn, Commented Sep 20, 2014 at 14:08
I don't think that's correct, the json.net library does the escaping natively and doing json.parse on it works fine. — dcrdev
– dcrdev, Commented Sep 20, 2014 at 14:16
Then as I said, it must just be the way the string is shown in your debugger. If the actual output had all those backslashes in it it would be invalid JSON. (As can be seen here: jsfiddle.net/h5pj7q8o) — nnnnnn
– nnnnnn, Commented Sep 21, 2014 at 14:04
it works right away if you leave out the escapes, here as clientside data : data.data -> jsfiddle.net/x8678osL — davidkonrad
– davidkonrad, Commented Sep 22, 2014 at 12:20
Is JSON.NET passing the JSON as a string or as actual JSON? If it's a string, then JSON.parse or something similar will have to be used before DataTables can use it. NOTE: I'm going by what you have posted. — dotnetN00b
– dotnetN00b, Commented Sep 25, 2014 at 17:58

dcrdev · Accepted Answer · 2014-10-18 18:35:54Z

1

The reason datatables doesn't understand the output is that the resulting json is a json string as appose to a collection of json objects. Json.NET isn't causing this issue but rather is a result of returning json from an MVC controller.

The solution to the problem is to use JSON.parse within the dataSrc property of datatables like so:

$('#incVolumes').dataTable( {
    "ajax": {
        "url": "http://localhost/IceMin/IMReporting/Volumes",
         dataSrc: function(json) { var parsedData = JSON.parse(json); return parsedData.data }
    },

answered Oct 18, 2014 at 18:35

dcrdev

1371 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why does jQuery DataTables not understand this basic JSON array?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related