JavaScript / jQuery: Push items to array / object with same key for each item

Question

I use DataTables and am trying to generate the "aoColumns" values dynamically so that I don't have to hard-code them.

I tried with the below approach but that seems to be wrong.
My guess is that I am overwriting the same key in each row instead of appending it to each other.

Can someone show me how to do this right - considering that the key "mData" stays the same for all values ?

Expected outcome:

    var tableDT = $('#tblReport').dataTable({
        dom: 'Bfrtip',
        "bProcessing": true,
        "sAjaxSource": "data.php",
        "aoColumns": [
            { mData: 'col1' },
            { mData: 'col2' },
            { mData: 'col3' },
            { mData: 'col4' },
            { mData: 'col5' }
        ]

Dynamic approach:

    var reportColsShort = 'col1,col2,col3,col4,col5'; // for testing purposes
    var aoCols = [];
    
    for(var i = 0; i <reportColsShort.length; i++){
        aoCols['mData'] = reportColsShort[i];
    }

    var tableDT = $('#tblReport').dataTable({
        dom: 'Bfrtip',
        "bProcessing": true,
        "sAjaxSource": "data.php",
        "aoColumns": aoCols

Swati · Accepted Answer · 2020-11-16 04:59:41Z

1

You need to create new JSON Object inside your for-loop and then push this value to your main JSON Array.

Demo Code:

var reportColsShort = 'col1,col2,col3,col4,col5'; // for testing purposes
var aoCols = [];
var colss = reportColsShort.split(",");//split values
//if array no need of split
for (var i = 0; i < reportColsShort.split(",").length; i++) {
  var aoColss = {}//decalre this
  aoColss['mData'] = colss[i];//add value to json object
  aoCols.push(aoColss)//push value in main json arry
}
console.log(aoCols)

answered Nov 16, 2020 at 4:59

Swati

28.5k4 gold badges26 silver badges45 bronze badges

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

Comments

tsamridh86 · Accepted Answer · 2020-11-16 11:05:51Z

1

Yes, you have made a minor mistake, you need to push to array, but you are replacing keys in your map.

You only need to change your logic inside the for loop :

for(var i = 0; i <reportColsShort.length; i++){
        aoCols.push({ 'mData' : reportColsShort[i] } );
    }

and then you should get your desired output. You should also change your reportColsShort variable into an array instead :

var reportColsShort = 'col1,col2,col3,col4,col5'.split(",");

edited Nov 16, 2020 at 11:05

answered Nov 16, 2020 at 4:57

tsamridh86

1,49612 silver badges23 bronze badges

1 Comment

keewee279 Over a year ago

Thanks a lot for this too, and for the comment on the variable. This approach doesn't seem to work for me though and I think it is missing a square bracket.

Aapan Mutsuddy · Accepted Answer · 2020-11-16 05:06:44Z

0

Use push.

    var reportColsShort = ['col1','col2','col3','col4','col5']; // for testing purposes

    var aoCols = [];

    for(var i = 0; i <reportColsShort.length; i++){
        aoCols.push({'mData':reportColsShort[i]})
    }

If you dont have the reportColsShort variable in above format use split.

var reportColsShort = 'col1,col2,col3,col4,col5'.split(',')

answered Nov 16, 2020 at 5:06

Aapan Mutsuddy

234 bronze badges

Comments

wjatek · Accepted Answer · 2020-11-16 05:07:16Z

0

You want to split your string, not iterate over it. Then you want to iterate over array of splitted elements and for every one of them you want to create an object and push it into the array.

var reportColsShort = 'col1,col2,col3,col4,col5';
var aoCols = [];

reportColsShort.split(',').forEach(item => {
  aoCols.push({
    'mData': item
  })
})

console.dir(aoCols);

edited Nov 16, 2020 at 5:07

user9674816

answered Nov 16, 2020 at 4:58

wjatek

1,0061 gold badge9 silver badges27 bronze badges

Collectives™ on Stack Overflow

JavaScript / jQuery: Push items to array / object with same key for each item

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related