CODEWITHSUNDEEP
javascriptjqueryarraysassociative-array
keewee279
keewee279

Reputation: 1654

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

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

Upvotes: 1

Views: 1664

Answers (4)

tsamridh86
tsamridh86

Reputation: 1496

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(",");

Upvotes: 1

wjatek
wjatek

Reputation: 1006

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);

Upvotes: 0

Aapan Mutsuddy
Aapan Mutsuddy

Reputation: 23

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(',')

Upvotes: 0

Swati
Swati

Reputation: 28522

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)

Upvotes: 1

Related Questions