How to get data from populated table?

How to get data from populated table?

MikeLMCMikeLMC Posts: 4Questions: 1Answers: 0

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.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 11,869Questions: 25Answers: 2,776

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

    Kevin

  • MikeLMCMikeLMC Posts: 4Questions: 1Answers: 0
    edited February 24

    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.

  • colincolin Posts: 10,946Questions: 0Answers: 1,865

    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

  • kthorngrenkthorngren Posts: 11,869Questions: 25Answers: 2,776
    Answer ✓

    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

Sign In or Register to comment.