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

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

singa4realsinga4real Posts: 4Questions: 1Answers: 0

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.

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,276Questions: 26Answers: 4,765

    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

  • singa4realsinga4real Posts: 4Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,276Questions: 26Answers: 4,765
    edited August 2018

    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

  • singa4realsinga4real Posts: 4Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,276Questions: 26Answers: 4,765
    Answer ✓

    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

  • singa4realsinga4real Posts: 4Questions: 1Answers: 0

    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.

This discussion has been closed.