jQuery datatables parsing json incorrectly

Question

I'm just trying an example of datatables with query with the following json object...

[{"firstName":"pom",
"lastName":"sdfpom",
"email":null,
"password":"cfe9a43acec0a35f903bc2d646ce8e58b5ef6b67",
"username":"Dave",
 "access":null,
"id":1},
{"firstName":"FirstName",
"lastName":"LastName",
"email":null,
"password":"8d60258ef3ae1b8eae67e9298f15edf5c6e05dfe",
"username":"Username",
"access":null,
"id":2}]

This is returned in the variable data below...

<script>
$(document).ready(function() {
    $.getJSON('userManagement/getAllUsers', function(data) {
            $('#table').dataTable( {
                "sAjaxSource": data
        });
    });
});

    </script>
    <table id="table">
        <thead>
            <tr>
                <th>firstName</th>
                <th>lastName</th>
                <th>email</th>
                <th>password</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1 Data 1</td>
                <td>Row 1 Data 2</td>
                <td>etc</td>
            </tr>
            <tr>
                <td>Row 2 Data 1</td>
                <td>Row 2 Data 2</td>
                <td>etc</td>
            </tr>
        </tbody>
    </table>

Now the JSON seems to be valid, and when I do anything else with it for instance use it within jquery it works fine, but datatables just doesn't render correctly at all. Is there something wrong with the javascript I'm using?

raina77ow · Accepted Answer · 2012-10-11 18:33:28Z

5

By default, DataTables will process an array of arrays for its data source: there's an additional step when it has to deal with array of objects (as in your case). It's described in this example in the plugin documentation. Basically, what you have to do is to add description of 'column' properties (as array):

$('#table').dataTable({
  "aaData": data,
  "aoColumns": [
    { "mData": "firstName" },
    { "mData": "lastName" },
    { "mData": "email" },
    { "mData": "password" },
    { "mData": "username" },
    { "mData": "access" },
    { "mData": "id" }
  ]
});

Here's fiddle to play with.

edited Oct 11, 2012 at 18:33

answered Oct 11, 2012 at 17:12

raina77ow

107k16 gold badges205 silver badges240 bronze badges

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

3 Comments

David Over a year ago

This does now show the table, but it's empty other than the <td> rows I've added in the html, when I remove these the JSON data does not populate the table. Do you have any other ideas? Thank you for your feedback :)

raina77ow Over a year ago

Updated the answer: as you work with JS structure, you need to use 'aaData' key; sAjaxSource is used to give an URL that returns the source JSON.

Piotr Kula Over a year ago

thanks to your fiddle I managed to work out to return data = JSON.Parse(result.d); return data; This is for new dataTables, which doesn't use aoColumns any more, but still, worked it out after a few hours of messing about!

Sushanth -- · Accepted Answer · 2012-10-11 17:07:31Z

1

Your json is an object inside an array..

So instead of this

"sAjaxSource": data

Try this

"sAjaxSource": data[0]

answered Oct 11, 2012 at 17:07

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

1 Comment

David Over a year ago

This just shows the <tbody> data in the html - when I remove the tBody data altogether it just shows the header. none of my JSON data is displayed. Thank you for your feedback though :)

McDowell · Accepted Answer · 2015-04-07 08:27:20Z

1

$.ajax( {
          "dataType": 'json',
          "type": "POST",
          "url": sSource,
          "data": aoData,
          contentType: "application/json; charset=utf-8",
          async : false,
          success: function (json) { 
            fnCallback(json);
          },
          complete: function (msg,a,b) {
            console.log('complete :'+msg) 
          },
          error : function(msg,a,b) {
            console.log('error:'+msg);
          }
        } );

The async : false is very important. This will cause not to render the page until the json data is bounded properly.

This worked for me.

edited Apr 7, 2015 at 8:27

McDowell

109k31 gold badges207 silver badges272 bronze badges

answered Apr 7, 2015 at 7:01

Waqar

4264 silver badges17 bronze badges

Comments

Arjun · Accepted Answer · 2012-10-12 10:44:24Z

0

first of all check if your json is valid or not use www.jsonlint.com for the purpose.

Secondly Try to enclose your JSON object with aaData like:

{"aaData" :[{"firstName":"pom","lastName":"sdfpom","email":null,
"password":"cfe9a43acec0a35f903bc2d646ce8e58b5ef6b67",
"username":"Dave","access":null,"id":1},
{"firstName":"FirstName","lastName":"LastName","email":null,
"password":"8d60258ef3ae1b8eae67e9298f15edf5c6e05dfe",
"username":"Username","access":null,"id":2}] 
}

answered Oct 12, 2012 at 10:44

Arjun

214 bronze badges

3 Comments

David Over a year ago

Yes the JSON is valid, I can't add to the JSON as it's being generated from Jackson with SpringMVC so the transition from object to JSON representation is seamless.

Arjun Over a year ago

Listen if the json generated is the same as the one given by you above then it generates an error.

David Over a year ago

That's just the line rendering of the stackoverflow code tag, I'll format it but it does generate valid JSON

Collectives™ on Stack Overflow

jQuery datatables parsing json incorrectly

4 Answers 4

3 Comments

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related