遍历javascript对象并动态添加对象属性（JS对象中的键值对）

Question

I am not sure if this question has been answered earlier. Although i didn't find any relevance to what i wanted. here's the original code.

function addrow() {
                  var row = {
                             name: null,
                             city: null,
                             Contact: null,
                             location: null             
                  };

                  $("#jqxgrid").jqxGrid('addrow', null, row, 'first');
}

This code adds a new row to the grid table once this function executes by click function. It creates a empty row. The column names are name, city, Contact and location. All these columns entries row gets null value and empty row gets added to the grid.

I want to make this dynamic. ie irrespective of the column names and number of columns, it should create empty row for me. for eg. if there are only 2 column names named Name and Age, it should create a row of 2 empty cells.

I tried something like this to make it dynamic.

var headers= $line_array. 

i get the dynamic column header names from an array passed by back-end to front-end. So the column headers are present in an array named headers. Then i added this

for(key in row) { headers[key]=null,};
$("#jqxgrid").jqxGrid('addrow', null, row, 'first'); 

So the final addrow() function looks like this

function addrow() {

var headers= $line_array;

var i;
var key = headers.length;
var row = {}; // create empty object. we can add header names inside this row for display.

for(key in row) { 
    headers[key]=null,};
    $("#jqxgrid").jqxGrid('addrow', null, row, 'first');
}

Can someone please suggest me what minor mistake i am committing over here ?

Answer 1

I am glad i found the answer myself. Although inputs from @MaxZoon and @RicharGrant helped me understand what might be the issue.

If this code helps anyone, i will be happy. here it is.

function addrow() {
    var headers= $line_array;
    var i;
    var key = headers.length;
    var row = {};

    for (i=0; i <headers.length; i++) {
                                       row[headers[i]]=null;
    }

    $("#jqxgrid").jqxGrid('addrow', null, row, 'first');
}

This is it. It was as simple as that. I just had to take a look at how a key/value pair is assigned to a Javascript object. Thanks all.