.data().toArray() returning empty array

tokrum · June 2016

I have successfully populated my table with data, but now I need to extract it back out again to do calculations and produce charts. Code:

function display_table(obj) {
var params = {
ajax: {
url: 'http://127.0.0.1:5000/api/v_0_0/json/8',
dataSrc: ''
},
columnDefs: obj,
dom: 'Bfipt',
buttons: ['copy', 'print', 'csv']
};

        //This is the DataTables.js call that initializes and displays the table
        var table = $('#example').DataTable(params);

        var o = table.column(0).data().toArray();

...etc.
When I alert(0), I get an empty array '[]' and o.length shows length of zero. My table is already displayed on my web page with the data in it, so I know it's in there!
What am I missing?

jr42.gordon · June 2016

Have you tried it without '.toArray()'?

allan · June 2016

Also don't use alert! Use console.log.

Allan

tokrum · June 2016

OK, using console.log, here is what I get for table.column(0).data():

tokrum · June 2016

and here's the rest:

1,"sCellType":"td","_setter":null,"targets":8,"title":"Ppc_Impressions","data":"ppc_impressions"},{"idx":9,"aDataSort":[9],"bSearchable":true,"bSortable":true,"bVisible":true,"_sManualType":null,"_bAttrSrc":false,"fnCreatedCell":null,"mData":"ppc_clicks","mRender":null,"nTh":{"jQuery1120014248317612098427":76},"nTf":null,"sClass":"","sContentPadding":"","sDefaultContent":null,"sName":"","sSortDataType":"std","sSortingClass":"sorting","sSortingClassJUI":"","sTitle":"Ppc_Clicks","sType":"string","sWidth":"76px","sWidthOrig":null,"iDataSort":-1,"sCellType":"td","_setter":null,"targets":9,"title":"Ppc_Clicks","data":"ppc_clicks"},{"idx":10,"aDataSort":[10],"bSearchable":true,"bSortable":true,"bVisible":true,"_sManualType":null,"_bAttrSrc":false,"fnCreatedCell":null,"mData":"ppc_avgcpc","mRender":null,"nTh":{"jQuery1120014248317612098427":81},"nTf":null,"sClass":"","sContentPadding":"","sDefaultContent":null,"sName":"","sSortDataType":"std","sSortingClass":"sorting","sSortingClassJUI":"","sTitle":"Ppc_Avgcpc","sType":"string","sWidth":"83px","sWidthOrig":null,"iDataSort":-1,"sCellType":"td","_setter":null,"targets":10,"title":"Ppc_Avgcpc","data":"ppc_avgcpc"},{"idx":11,"aDataSort":[11],"bSearchable":true,"bSortable":true,"bVisible":true,"_sManualType":null,"_bAttrSrc":false,"fnCreatedCell":null,"mData":"ppc_spend","mRender":null,"nTh":{"jQuery1120014248317612098427":86},"nTf":null,"sClass":"","sContentPadding":"","sDefaultContent":null,"sName":"","sSortDataType":"std","sSortingClass":"sorting","sSortingClassJUI":"","sTitle":"Ppc_Spend","sType":"string","sWidth":"76px","sWidthOrig":null,"iDataSort":-1,"sCellType":"td","_setter":null,"targets":11,"title":"Ppc_Spend","data":"ppc_spend"},{"idx":12,"aDataSort":[12],"bSearchable":true,"bSortable":true,"bVisible":true,"_sManualType":null,"_bAttrSrc":false,"fnCreatedCell":null,"mData":"ppc_enrolled","mRender":null,"nTh":{"jQuery1120014248317612098427":91},"nTf":null,"sClass":"","sContentPadding":"","sDefaultContent":null,"sName":"","sSortDataType":"std","sSortingClass":"sorting","sSortingClassJUI":"","sTitle":"Ppc_Enrolled","sType":"string","sWidth":"93px","sWidthOrig":null,"iDataSort":-1,"sCellType":"td","_setter":null,"targets":12,"title":"Ppc_Enrolled","data":"ppc_enrolled"}],"aoHeader":[[{"unique":true},{"unique":true},{"unique":true},{"unique":true},{"unique":true},{"unique":true},{"unique":true},{"unique":true},{"unique":true},{"unique":true},{"unique":true},{"unique":true},{"unique":true}]],"aoFooter":[],"oPreviousSearch":{"bCaseInsensitive":true,"sSearch":"","bRegex":false,"bSmart":true,"_hungarianMap":{"caseInsensitive":"bCaseInsensitive","search":"sSearch","regex":"bRegex","smart":"bSmart"}},"aoPreSearchCols":

tokrum · June 2016

and the last of it:

jr42.gordon · June 2016

That is what I would expect to see when viewing the DataTable variable as all of that is configuration. Not really sure why you would be getting that for columns().data()

jr42.gordon · June 2016

Now I know you will get all of that when messing around in DataTables Live

allan · June 2016

Yeah - the console.log there is showing the entire contents of the API instance.

@tokrum - Your table appears to have no data in it, hence why the API is getting you an empty array.

If you link to the page showing the issue I'd be happy to take a look and offer some help.

Allan

tokrum · June 2016

Thanks @allan! It's not a public site, but I have attached the entire code of the page. As you will see, the table really does have data in it, because the data gets displayed on the screen. Could there be an issue with the ajax attribute of the configuration retrieving the data asynchronously, while the rest of the code, including my call to .data() continues to execute? I didn't think so, because I got the same result when I inserted a long delay between the configuration and the .data() call. Also there was nothing in the DT documentation about needing a callback function after invoking $(#example).DataTable(params).

The ajax call to my /getcols endpoint returns this:
[{'data': 'keyword', 'targets': 0},
{'targets': 0, 'title': 'Keyword'},
{'data': 'datestring', 'targets': 1},
{'targets': 1, 'title': 'Datestring'},
{'data': 'geo', 'targets': 2},
{'targets': 2, 'title': 'Geo'},
{'data': 'kwcat', 'targets': 3},
{'targets': 3, 'title': 'Kwcat'},
{'data': 'engine', 'targets': 4},
{'targets': 4, 'title': 'Engine'},
{'data': 'matchtype', 'targets': 5},
{'targets': 5, 'title': 'Matchtype'},
{'data': 'ppc_qualityscore', 'targets': 6},
{'targets': 6, 'title': 'Ppc_Qualityscore'},
{'data': 'ppc_avgpos', 'targets': 7},
{'targets': 7, 'title': 'Ppc_Avgpos'},
{'data': 'ppc_impressions', 'targets': 8},
{'targets': 8, 'title': 'Ppc_Impressions'},
{'data': 'ppc_clicks', 'targets': 9},
{'targets': 9, 'title': 'Ppc_Clicks'},
{'data': 'ppc_avgcpc', 'targets': 10},
{'targets': 10, 'title': 'Ppc_Avgcpc'},
{'data': 'ppc_spend', 'targets': 11},
{'targets': 11, 'title': 'Ppc_Spend'},
{'data': 'ppc_enrolled', 'targets': 12},
{'targets': 12, 'title': 'Ppc_Enrolled'},
{'data': 'date', 'targets': 13},
{'targets': 13, 'title': 'Date'}]

The call to my /json/8 endpoint returns this:
[{"keyword":"kaiser medicare","datestring":"7\/26\/15","geo":"Northern California","kwcat":"Brand Product Known","engine":"Google","matchtype":"Exact","ppc_qualityscore":10,"ppc_avgpos":1,"ppc_impressions":34,"ppc_clicks":8,"ppc_avgcpc":2.06,"ppc_spend":16.48,"ppc_enrolled":0},{"keyword":"kaiser medicare","datestring":"8\/2\/15","geo":"Northern California","kwcat":"Brand Product Known","engine":"Google","matchtype":"Exact","ppc_qualityscore":10,"ppc_avgpos":1,"ppc_impressions":32,"ppc_clicks":3,"ppc_avgcpc":1.54,"ppc_spend":4.62,"ppc_enrolled":0},{"keyword":"kaiser medicare","datestring":"8\/9\/15","geo":"Northern California","kwcat":"Brand Product Known","engine":"Google","matchtype":"Exact","ppc_qualityscore":10,"ppc_avgpos":1,"ppc_impressions":48,"ppc_clicks":13,"ppc_avgcpc":1.51,"ppc_spend":19.63,"ppc_enrolled":1},{"keyword":"kaiser medicare","datestring":"8\/16\/15","geo":"Northern California","kwcat":"Brand Product Known","engine":"Google","matchtype":"Exact","ppc_qualityscore":10,"ppc_avgpos":1,"ppc_impressions":65,"ppc_clicks":20,"ppc_avgcpc":1.2,"ppc_spend":24.09,"ppc_enrolled":1},{"keyword":"kaiser medicare","datestring":"8\/23\/15","geo":"Northern California","kwcat":"Brand Product Known","engine":"Google","matchtype":"Exact","ppc_qualityscore":10,"ppc_avgpos":1,"ppc_impressions":61,"ppc_clicks":17,"ppc_avgcpc":1.56,"ppc_spend":26.6,"ppc_enrolled":1},{"keyword":"kaiser medicare","datestring":"8\/30\/15","geo":"Northern California","kwcat":"Brand Product Known","engine":"Google","matchtype":"Exact","ppc_qualityscore":10,"ppc_avgpos":1,"ppc_impressions":43,"ppc_clicks":6,"ppc_avgcpc":3.18,"ppc_spend":19.06,"ppc_enrolled":2},{"keyword":"kaiser medicare","datestring":"9\/6\/15","geo":"Northern California","kwcat":"Brand Product Known","engine":"Google","matchtype":"Exact","ppc_qualityscore":10,"ppc_avgpos":1,"ppc_impressions":47,"ppc_clicks":11,"ppc_avgcpc":1.1,"ppc_spend":12.07,"ppc_enrolled":0},{"keyword":"kaiser medicare","datestring":"9\/13\/15","geo":"Northern California","kwcat":"Brand Product Known","engine":"Google","matchtype":"Exact","ppc_qualityscore":10,"ppc_avgpos":1,"ppc_impressions":51,"ppc_clicks":13,"ppc_avgcpc":1.17,"ppc_spend":15.16,"ppc_enrolled":1}]

allan · June 2016

$('#example').html(data);

This is not a valid thing to do with DataTables. You are directly changing the HTML and DataTables doesn't (and can't) know that that has happened. You would need to initialise the DataTable after this point, or (I would suggest) use the API to add the rows.

See this FAQ.

Allan

tokrum · June 2016

@allan,
OK, I understand that and will change it. However, that's not where I'm having the problem that is the subject of this question. The problem is occurring when the page first loads and the DT is initialized:

function display_table(obj) {
            var params = {
                    ajax: {
                    url: 'http://127.0.0.1:5000/api/v_0_0/json/8',
                    dataSrc: ''
                },
                columnDefs: obj,
                dom: 'Bfipt',
                buttons: ['copy', 'print', 'csv']
            };
            //console.log(params);
            //This is the DataTables.js call that initializes and displays the table
            var table = $('#example').DataTable(params);
            
            var o = table.column(0).data();

The weird results I originally asked about happen before the invalid code you pointed out is ever invoked... unless you are suggesting that the mere existence of this code is responsible?

Please give this another look and help if you can. Many thanks!

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan · June 2016

Thanks for the code. You are ajax loading the data, which is the "issue". Keep in mind what the A in ajax stands for - asynchronous. The data hasn't finished loading when your var o = ... line executes! Hence there is no data in the table.

Use initComplete to wait for the data to load.

Allan

.data().toArray() returning empty array

.data().toArray() returning empty array

Answers

Howdy, Stranger!

Categories

DataTables

.data().toArray() returning empty array

.data().toArray() returning empty array

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables