Make DataTables column variable based on an array

Question

Background:
I'm busy building a application which (amongst other things) has to be able to show a report. I choose DataTables because it works awesomely and it was easy to implement. I've made an application which is based on one (static) dataset. However, I have gotten the request to alter the application to be able to work with multiple datasets.

Question:
Amonst other things, i want to replace the statically defined columns (see code snippet), with a variable. In this case an array with id, keten, name, x, y, which will be declared somewhere else dynamically.

How do i change my function to incorporate a variable array instead of hardcoding the columns?

The end result should change from

"columns": [
    {"data": "id"},
    {"data": "keten"},
.......

to something like

"columns": [
    {"data": *variableReportData*}

Code:

function rapport_vullen(){
    $("#rapport").dataTable({
        destroy: true,
      "aaData": geojson.features.map(function(row) { return row.properties; }),
        "columns": [
            {"data": "id"},
            {"data": "keten"},
            {"data": "name"},
            {"data": "x"},
            {"data": "y"}
        ]
    });
    download_rapport()
};

castletheperson · Accepted Answer · 2016-05-24 13:19:41Z

1

You can convert the array of column names into an array of objects by using .map() like so:

var inputArray = ["a","b","c"]; // for example
inputArray.map(function(d) { return {data:d}; });

So the I/O would be:

["a","b","c"] --> [{data:"a"},{data:"b"},{data:"c"}]

And then create the DataTable using the output.

function rapport_vullen(inputArray){
    $("#rapport").dataTable({
        destroy: true,
        aaData: geojson.features.map(function(row) { return row.properties; }),
        columns: inputArray.map(function(d) { return {data:d}; })
    });
    download_rapport()
}

edited May 24, 2016 at 13:19

answered May 24, 2016 at 13:13

castletheperson

33.6k11 gold badges74 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jordi Z Over a year ago

I've been tinkering with the code a bit but the results are not 100% correct. Although it returns the correct number of record for my report, all record are [object Object]

castletheperson Over a year ago

@JordiZ Are you outputting to the console? Try using JSON.stringify(obj) when you output.

Jordi Z Over a year ago

When I console.log(inputArray), the console shows an object. When I console.log(JSON.stringify(inputArray), the results are : [{"data":"id"},{"data":"x"},{"data":"y"},{"data":"keten"},{"data":"name"}], which is good I thought. However, when I try to incorporate it in my DataTables, it gives an empty report. Error message: "TypeError: invalid 'in' operand e"

castletheperson Over a year ago

@JordiZ Hmm, that's strange. Can you make a snippet where I can see the code?

Jordi Z Over a year ago

Sorry for the late reply, while making the snippet I saw I used one function double. Now it works, thanks.

Rohìt Jíndal · Accepted Answer · 2016-05-24 13:21:34Z

1

You can use javascript .map() function :

it will convert the array elements into the objects as you wanted.

var arr = [id, keten, name, x, y];

var objArr = arr.map(function(item) { return {data:item} });

console.log(objArr);

 [{"data": "id"},
  {"data": "keten"},
  {"data": "name"},
  {"data": "x"},
  {"data": "y"}]

Then, you can directly use this in your datatable function. Thanks

answered May 24, 2016 at 13:21

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

Collectives™ on Stack Overflow

Make DataTables column variable based on an array

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related