Ajax Example with JSON

matt_benett

I am trying to follow the AJAX example, though my data is all JSON

Data:

{ "personOne": { "username": "personOne", "systemA": "true", "systemB": "true" }, "personTwo": { "username": "personTwo", "systemA": "true", "systemC": "true" } }

My HTML is very simple:

    <script>
        $(document).ready(function() {
            $('#hubUserTable').DataTable( {
                "dom": '<"top"lif>rt<"bottom"Bp><"clear">',
                "buttons": [
                    'copy', 'csv', 'excel', 'print'
                ],
                "scrollX": true,
                "pagingType": "numbers",
                "processing": true,
                        
                "nowrap": true,
                "ajax": 'datatable_access.php'
            } );
        } );

    </script>

However, I dont get any data, and I do get a error

TypeError: e[i] is undefined[Learn More] jquery.dataTables.min.js:65:437 

Any help please? There should be 4 columns. (however, notice each person does not have all columns).

If it helps, my data within the 'datatable_access.php' is an array as $myData[[]], that I do a echo json_encode on to output, so I can put it in a different format if thats easier.

colin

Hi @matt_benett ,

Because your Ajax data isn't inside a standard "data" object, you need to let DataTables know - see the middle example for ajax.dataSrc,

Cheers,

Colin

kthorngren

Your JSON structure looks like this:

{
    "personOne": {
        "username": "personOne",
        "systemA": "true",
        "systemB": "true"
    },
    "personTwo": {
        "username": "personTwo",
        "systemA": "true",
        "systemC": "true"
    }
}

While it is a valid JSON string it is not a structure that will work with Datatables. Datatables expects an array of data. The data can consist of arrays or objects. This doc provides more info.
https://datatables.net/manual/data/#Data-source-types

Would you be able to change your server script to provide respond with this structure?

{
    [
    {
        "username": "personOne",
        "systemA": "true",
        "systemB": "true"
    },
    {
        "username": "personTwo",
        "systemA": "true",
        "systemC": "true"
    }
    ]
}

If not you could use ajax.dataSrc as a function to loop through the returned data to create the above data structure. See the last example.

You will also need to use columns.data to define your columns since you are using object based data. The forth column will also need to be defined even though its not in the data. You can set data: null for that column. You may also need to use columns.defaultContent for that column depending on what you are doing with it.

As far as I know there is no option "nowrap": true,. This is probably not doing anything for you.

Kevin

matt_benett

thanks guys, went with the clean up my data, and use the standard method approach. Worked perfect.

I am not a bit stuck on the columns, how do I make it work for where there is no data please.

{
    [
    {
        "username": "personOne",
        "systemA": "true",
        "systemB": "true"
    },
    {
        "username": "personTwo",
        "systemA": "true",
        "systemC": "true"
    }
    ]
}

kthorngren

I am not a bit stuck on the columns, how do I make it work for where there is no data please.

What are you doing with the 4th column?

Kevin

matt_benett

see data. Note that not all the data colums are in each element.

i.e.
personOne is missing Colunm SystemC
personTwo is missing Colunm SystemB

Other people have all A, B and C

thanks Matt

kthorngren

I get it now, I didn't look that close ate your object keys. See if columns.defaultContent will work in the cases of not having the data.

Kevin

matt_benett

Kevin, that was perfect, thank you.