Setting "columns"; with a JSON formatted string or an object

mattydaw

I want to use a custom function that reads my columns from an multi dimensional array and do something like this:

set the string or object:
jsondtcolumns = json_dtcolumns( colsls );

call the string or object:
"columns": jsondtcolumns,

The error I get for both methods:
"jquery-3.4.1.min.js:2 Uncaught TypeError: Cannot read property 'length' of undefined"

jsondtcolumns in the console after being passed to JSON.parse():
0: {data: "name"}
1: {data: "email"}
2: {data: "phone"}
3: {data: "workfunction"}
4: {data: "functions", sClass: "functions"}
length: 5
proto: Array(0)

jsondtcolumns in the console as a JSON formatted string:
[
{ "data": "name" },
{ "data": "email" },
{ "data": "phone" },
{ "data": "workfunction" },
{ "data": "functions", "sClass": "functions" }
]

I've also tried various combinations of eval( jsondtcolumns ) with no luck.
Usually I can figure these errors out, but I'm at my wits end at the moment.

kthorngren

Here is a working example with your data as a Javascript object:
http://live.datatables.net/rahumiba/1/edit

Are you trying to use jsondtcolumns as a JSON string? If so that is the problem. It needs to be a Javascript object. If this doesn't help please update or post a test case showing the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kthorngren

@mattydew thanks for the link to your page. It looks like you are fetching the column data via ajax then in the done function processing the columns.

  request.done(function(output){
    if (output.result == 'success' && output.message == 'page_lists') {
      // assign individual variables to their values
      for (let key in output.pginfo) {
        //console.log( key + ': ' + output.pginfo[key] );
    var varname = key + ' = \"' + output.pginfo[key] + '\"';
    eval(varname);
      }
      colsls = output.colsls;
      lists = output.lists;
      rowfmt = output.rowfmt;
      jsondtcolumns = json_dtcolumns( colsls, showrownum, showdeletecolumn );
console.log( jsondtcolumns );
alert(JSON.stringify(jsondtcolumns));
    }
  });

In your source just below the done function you are initialization Datatables.

  // On page load: datatable
  var maintable = $('#table_records').DataTable({ ... });

I believe the problem is that Datatables is being initialized before the dine function is complete. This is due to the async nature of ajax. When Datatables initializes jsondtcolumns hasn't been populated with anything yet. Move the Datatables init code inside the dine function and that should take care of the 'undefined' problem.

Kevin

mattydaw

Thank you! I appreciate it.