how can i display json data with dynamic generated key in datatables

singa4real

my data structure is like this,

{"dynamic_key":{
"accesscode":"accesscode1",
"code":"code1",
"department":"Department1",
"fname":"fname1",
"lname":"lname1",
"mname":"mname1",
"regno":regno1,
"status":"Active"},
"dynamica_key":{
"accesscode":"accesscode2",
"code":"code2",
"department":"Department2",
"fname":"fname2",
"lname":"lname2",
"mname":"mname2",
"regno":regno2,
"status":"Active"}}

and my datatables initializes with below setup

$.fn.dataTable.ext.errMode = 'none';
var table = $('.myTable').on( 'error.dt', function ( e, settings, techNote, message ) {}).DataTable( {
"ajax": {
"url": "./asset/data.json,
"dataSrc": ""
},
"columns": [
{ "data": "code" },
{ "data": "fname" },
{ "data": "mname" },
{ "data": "lname" },
{ "data": "regno" },
{ "data": "code" },
{ "data": "accesscode" },
{ "data": "department" },
{ "data": "status" },
],

});

still the datatables is show loading for eternity.

kthorngren

Try "dataSrc": "dynamic_key".

However you are showing only one record above. Which is fine but it still needs to be in an array. Datatables expects and array of objects even if its only one row.

Kevin

singa4real

the dynamic_key is generated dynamically, like firebase child node key of which i cant determine the key value. the problem is how to bypass that key so that i can locate the json data to display on datatables

kthorngren

You can use ajax.dataSrc as a function (there is an example in the doc) and using JS get the key then return just the object, for example return json[dynamic_key] assuming the key is stored in the variable dynamic_key.

You still need the object(s) in an array.

Kevin

singa4real

i have used "dataSrc": function ( json ) {
$.each(json, function() {
var dataSet = [this.code, this.fname, this.mname, this.lname, this.regno, this.department, this.status];
table.rows.add([dataSet]).draw();
});

which worked, but is freezed my browser UI and slow becuase the data is 32,000 rows, way as if i load a plain json of 40,000 rows without table.rows.add([dataSet]).draw(); is more faster and dont freeze my browser UI

kthorngren

Sorry, I meant something more like this example:
http://live.datatables.net/mebiyeyu/1/edit

        dataSrc: function ( data ) {
          var keys = Object.keys(data);
          return data[keys[0]];  //key[0] contains 'data'
        }

First it gets the keys from the data object. It assumes position 0 is the key of interest and returns that object. In the case of ajax.dataSrc you should return the data instead of using rows.add().

This FAQ may help you increase the table load speed.

Kevin

singa4real

thanks kthorngren for your respnse, your anwser gives me an insight to the solution to my problem. i must say a big Thank you and may the good Lord keep on blessing you.