Create JavaScript array (JSON format) for DataTables aoColumnDefs

Question

I'd like to create the following JSON data for DataTables parameter aoColumnDefs:

var aryJSONColTable = [
                        {"sTitle": "Column00", "aTargets": [0]},
                        {"sTitle": "Column01", "aTargets": [1]},
                        {"sTitle": "Column02", "aTargets": [2]},
                        {"sTitle": "Column03", "aTargets": [3]}
                      ]

Then I will put the variable into my DataTable variable declaration like following:

var oTable = $('#report').dataTable({
                                "aoColumnDefs": aryJSONColTable,
                                "bProcessing": true,
                                "bServerSide": true,
                                "bLengthChange": true,
                                "bFilter": true,
                                "aaSorting": [[ 3, "desc" ]],
                                "sScrollX": "100%",
                                "bScrollCollapse": true,
                                "bJQueryUI": true,
                                "sAjaxSource": "./getDataEA.php"
                            });

Based on this useful discussion, I have tried a JavaScript loop to create the JSON data aryJSONColTable as follow:

//create JSON array for aoColumnDefs
var aryColTableChecked = ["column00", "column01", "column02", "column03"];
var aryJSONColTable = [];

for (var i in aryColTableChecked) {
    aryJSONColTable.push({
                      "sTitle": aryColTableChecked[i],
                      "aTargets": [i]
                    });
};

I always get value "1" for data "aTargets" from above JavaScript loop, which I wish to get value [running_index_number] for data "aTargets".

Please kindly assist me on this matter. Thank you in advance.

Worksforme. Why do you think the first value of those arrays would always be 1? — Bergi
– Bergi, Commented Sep 7, 2012 at 3:54
Is that a typo that you've got Column02 twice in your desired output? — nnnnnn
– nnnnnn, Commented Sep 7, 2012 at 4:00
Yes, nnnnn, you've got sharp eyes :-) I have edited into Column03. Thanks for your comment though. — dnugroho
– dnugroho, Commented Sep 7, 2012 at 4:05

nnnnnn · Accepted Answer · 2012-09-07 04:01:11Z

1

I suggest you change from a for..in loop to a standard for loop because iterating over an array with for..in is "dangerous" in that if you're using a library that adds properties/methods to the Array.prototype then the loop will iterate over those too.

Also, with a for..in the iterator i will be a string, creating "aTargets" : ["0"], and you want it to be a number to create "aTargets" : [0].

var aryColTableChecked = ["column00", "column01", "column02", "column03"];
var aryJSONColTable = [];

for (var i = 0; i <  aryColTableChecked.length; i++) {
    aryJSONColTable.push({
                      "sTitle": aryColTableChecked[i],
                      "aTargets": [i]
                    });
};

Seems to work fine: http://jsfiddle.net/nnnnnn/Ek8tr/

NOTE: What you're producing is not JSON, it is an array of objects. (JSON is a data-interchange format that is always a string. JSON looks like JS object literal and array literal syntax, but it's not the same thing.)

edited Sep 7, 2012 at 4:01

answered Sep 7, 2012 at 3:54

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

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

5 Comments

Bergi Over a year ago

You shouldn't use the for-in-enumeration yourself, then :-) But true, the string (a truthy value) could be the problem here.

nnnnnn Over a year ago

@Bergi - Oops - I thought I'd copied the standard for code from my fiddle, but I must've copied it from the question. Thanks. Fixed. I couldn't duplicate the problem the OP mentioned about have "1" in every element though.

dnugroho Over a year ago

Hi nnnnnn, thank you for your quick reply. I have tried what you have suggested above, and I still get value [1] for data "aTargets". This JSON format is specified at JQuery DataTables parameter aoColumnDefs, you may check this link datatables.net/usage/columns for more details.

nnnnnn Over a year ago

I can't explain that result. You can see in my jsfiddle demo that aryJSONColTable ends up with the correct values in it. At what point are you checking the values and finding [1]? Before or after calling the .dataTable() method?

dnugroho Over a year ago

Yes,nnnnnn, you're absolutely right! It works fine now! Previously I watched over the array value using Firebug-Watch panel, it always shows me value [1] for data "aTargets", but when you go deeper into its value, it really gets [0],[1], and so on. Thank you all for your great help. I also start learning how to use jsfiddle as you suggested ;-)

elclanrs · Accepted Answer · 2012-09-07 04:07:15Z

1

for...in is for objects not arrays and aryColTableChecked is an array. You can do it like this:

var arr = [];
var max = 3; // zero based
for (var i = 0, n; i <= max; i++) {
    n = i > 9 ? '' + i : '0' + i; // make sure it has 2 digits
    arr.push({
        sTitle: 'Column' + n,
        aTargets: [i] // why array here?            
    });
}

edited Sep 7, 2012 at 4:07

answered Sep 7, 2012 at 3:50

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

8 Comments

Bergi Over a year ago

+1: I think the question "Why array here?" is the real problem.

nnnnnn Over a year ago

I think you want either max = 4 or i <= max.

nnnnnn Over a year ago

Cool. Another thing: I just noticed you've used i.length - does that work when i is a number? (IE gave me undefined for i.length so I'd use i > 9.)

elclanrs Over a year ago

Works for me here jsfiddle.net/reZrR in Chrome but I'll do what @bergi suggested

nnnnnn Over a year ago

Try your fiddle with max = 13 and see what happens. undefined > 1 is false.

|

Collectives™ on Stack Overflow

Create JavaScript array (JSON format) for DataTables aoColumnDefs

2 Answers 2

5 Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related