Initialise table with no data while using a complex JSON

toriacht

Hi,

I can initialise an empty table on page load to be populated later like so

var mytable =$('#myTable').DataTable({
         "columns": [
                  {"data": "id"},
                  {"data": "keyonename"},
                  {"data": "keytwototal"},
                  {"data": "keythreelocation"}
         ]
 
});

and i can then populate this table later via function call as follows

function updateData(data12){
var mytable =$('#myTable').DataTable();
        var dataarray= new Array(); 
        var data1 = JSON.parse(data12);
        dataarray.push(data1);
        mytable.clear();
        mytable.rows.add(dataarray);
        mytable.draw();

This solution is as per the answer to my previous question, ref: https://datatables.net/forums/discussion/45509/load-table-from-xmlhttprequest-response#latest

This works fine for basic JSON however in this next case i want to initialise and populate later with a "child" element from the JSON data. for example.

When loading the table directly on page load with data loaded from file i can do the following and tell it to look for "myhouse"

 $(document).ready(function () {
        getData(function (data) {
            //data = JSON.parse(data);
            console.log(data)

            $('#myTable').DataTable({
                data: data.myhouse, // data.myhouse
                "columns": [
                    {"data": "name"},
                    {"data": "date"},
                    {"data": "amount"},
                    {"data": "address"}
                ]
            });

The data is of the following format:

{
    "myhouse": [
        {
            "name": "nameywamey",
            "date": "2018-01-12",
            "amount": 500,
            "address": "mystreet"

        },
        {
            "name": "nameywamey",
            "date": "2018-01-11",
            "amount": 3000,
            "address": "mystreet"

        },
        {
            "name": "nameywamey",
            "date": "2018-01-10",
            "amount": 3935,
            "address": "mystreet"

        }
]
}

If I try to initialise it (with no data) as follows it predictably complains about unknown variable data.

        $('#mytable').DataTable({
           data: data.myhouse,
            "columns": [
                {"data": "name"},
                {"data": "date"},
                {"data": "amount"},
                {"data": "address"}
            ]
        });

If I try to initialise it (with no data) as follows it will initialise fine but when i try and update the table it complains about unknown parameter "myhouse.name"

        $('#mytable').DataTable({
            "columns": [
                {"data": "myhouse.name"},
                {"data": "myhouse.date"},
                {"data": "myhouse.amount"},
                {"data": "myhouse.address"}
            ]
        });

I attempt to load/reload the table as follows:

        function loadTable(data13){

            var mytable =$('#myTable').DataTable();
            var dataarray= new Array();
            var data1 = JSON.parse(data13);
            dataarray.push(data1);
            console.log(dataarray);
            mytable.clear();
            mytable.rows.add(dataarray);
            mytable.draw();
         

        }

Any help, yet again, is very much appreciated. In summary I want to initialise a table with no data and then update later and the data is of the format

{
    "myhouse": [
        {
            "name": "nameywamey",
            "date": "2018-01-12",
            "amount": 500,
            "address": "mystreet"

        },
        {
            "name": "nameywamey",
            "date": "2018-01-11",
            "amount": 3000,
            "address": "mystreet"

        }
    ---
 ]
}

toriacht

Hi,

I found a solution. I can do this by extracting the array from the returned JSON as follows

            mytable.clear();
            mytable.rows.add(data1['myhouse']);
            mytable.draw();

in this case i initialise the table as follows with no need for myhouse.name etc

$('#mytable').DataTable({
    "columns": [
        {"data": "name"},
        {"data": "date"},
        {"data": "amount"},
        {"data": "address"}
    ]
});

allan

Yes - that is the correct way to do it. Thanks for posting back.

Allan