How to get data from populated table?

MikeLMC

Hello,

How can I grab data from an already populated table? I don't want to select anything yet, just to simply grab everything back as an array of arrays for each row.

I have declared a global variable let table = $('#myTableId').DataTable(); and then I initialize it as a DataTable as above later on in one of my functions.

table = $('#myTableId').DataTable({
    data: myArray,
    select: true,
    columns: [
        {title: "Name"},
        {title: "Step"},
        ...
    ]
});

the data from myArray is a flattened out array of arrays as shown here in this example.

I can populate the table with my data but now I wish to simply grab it back in that flattened out form to convert it to a POST request.

How can I do this? Whenever I print out the var table it shows a humongous object with each element containing a <prototype>: [] sort of element but the data is nowhere.

In simple terms, how can I save my table to a variable to be able to retrieve the data later on? There seems to be no straight answer and I already tried to do console.log(table.rows.data().toArray()); but this doesn't work. To be honest, even if I try the table.rows.data() I don't get my data. It's as if my table is declared empty of some sorts. This is regardless if I use let or var to declare my variable.

kthorngren

Use table.rows().data().toArray() instead. Note the rows(). The API is rows().api().

Kevin

MikeLMC

Doing table.rows().data().toArray() returns me an empty array.

Here is most of the code. Maybe I'm missing something:

let table = $('#myTableId').DataTable();

$(document).ready(function (){
    $('#nav').DataTable({
        "paging":false,
        "info":false,
        "select":{
            style:'single'
        }
    });

    var url = 'my api url';
    $.getJSON(url, function (data){
        let mainArray = [];
        
        $.each(data.subList, function (key, value){
            let subArray = [];
            // logic here to flatten out my data.
            subArray.push(data.name);
            ...
            // eventually I push my working array into the main one and reinit
            mainArray.push(subArray);
        });

        // This is where I re-assign the value of table and populate the values.
        table = $('#myTableId').DataTable({
            data: mainArray,
            select: true,
            buttons: [
                {extend: 'create'}
            ],
            columns: [
                {title: "Name"},
                ...
            ]
        });
    });
    // I try to get the data back now. The below returns empty array.
    // Target is to get back the data as it's in my mainArray but I get empty array instead.
    console.log(table.rows().data().toArray());
});

I strongly believe there's an easy solution to my problem but it escapes me.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

The $.getJSON() ajax request is an asynchronous operation. The console.log(table.rows().data().toArray()); is executing before the request is complete. Move the console.log statement inside the $.getJSON() function after the Datatables initialization, for example:

        // This is where I re-assign the value of table and populate the values.
        table = $('#myTableId').DataTable({
            data: mainArray,
            select: true,
            buttons: [
                {extend: 'create'}
            ],
            columns: [
                {title: "Name"},
                ...
            ]
        });
        console.log(table.rows().data().toArray());
    });
    // I try to get the data back now. The below returns empty array.

Kevin