How to add columns dynamically in slickgrid?

Question

I'm trying to add dynamic columns to slickgrid by iterating through javascript array object.

The format for object in js array is:

 auditor = {"firstName":"test audit manager","lastName":".","middleName":null,"partyId":"11140"}

var columns = [];
/*from the ajax result, I'm obtaining 'auditors' js array */

for (var key in auditors) {

var auditor =  auditors[key];
                    var name = auditor["firstName"];

                    if(auditor["middleName"]){
                        name += auditor["middleName"];
                    }
                    if(auditor["lastName"]){
                        name += auditor["lastName"];
                    }
                    if(auditors[parseInt(key)+parseInt(1)]){
                        columns = columns += '{id: '+'"auditor_'+key+'", name: '+'"'+name+'"'+', field: '+'"auditor_'+key+'", editor: Slick.Editors.Text, width:80, minWidth:80, sortable:true, focusable:false},'; 
                    }
                    else{
                        columns = columns += '{id: '+'"auditor_'+key+'", name: '+'"'+name+'"'+', field: '+'"auditor_'+key+'", editor: Slick.Editors.Text, width:80, minWidth:80, sortable:true, focusable:false}';
                    }
                }//end for loop

columns.replace(/\\\//g, "/");

var options = {
                enableCellNavigation: true,
                enableColumnReorder: false,
                editable: true,       
                forceFitColumns: false,         
                enableCellNavigation: true,
                //enableAddRow: true,
                asyncEditorLoading: false,          
                autoEdit: true,
                secondaryHeaderRowHeight: 25
            };

            $(function () {
                grid = new Slick.Grid("#myGrid", data, columns, options);
                grid.setSelectionModel(new Slick.CellSelectionModel()); 
                var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);

                grid.onAddNewRow.subscribe(function (e, args) {
                    var item = args.item;   
                    grid.invalidateRow(data.length);
                    data.push(item);
                    grid.updateRowCount();
                    grid.render();
                });
            });

Answer 1

You are correctly declaring columns as an array at the top, but then you are adding string values to it later on. Use .push to add an element to an array, and the values should not be strings.

Something like:

columns.push(
  { 
    id: "auditor_" + key, 
    name: name, 
    field: "auditor_"+ key, 
    editor: Slick.Editors.Text, 
    width:80,  
    minWidth:80,  
    sortable:true, 
    focusable:false
  }
);

Then clearly your .replace() will have to be done on an element of the array, or before assigning value to the array.