Javascript using variable property names to assign value

Question

So I'm building dynamic tables that will be populated from my DB, but everything about these tables need to be dynamically assigned. So coming into it the function which creates the table will not know how many cols there are, or what the data type is in each col, but I've got that all worked out.

Now populating the data I'm using objects.

When creating the rows I call populate the object with the name of the row as the property name. This is important to stay the same because the tables will be using these property names to associate to which column the data belongs.

row.id          = dataObj[i].id;
row.timeType    = dataObj[i].timeType;
row.existing    = dataObj[i].existing;
row.upgrade     = dataObj[i].upgrade;
row.childNode   = dataObj[i].childNode;
row.budget      = dataObj[i].budget;

So 'row' is my object, and as you can see I'm using 'i' as an iterator in the loop to populate all the data before passing it to the table.

Here's the key... Because this table function should be able to accept any dataset, the program will never know what the property names are. I do have an array already stored with all the property names retrieved from the DB, but JS won't let me do something like this:

rows = [];
nameOfCols = ['id','timeType','existing','upgrade','childNode','budget'];  //Populated from DB
for (i=0;i<numRows;i++) {                                                  //Iterate over each row of data returned
  for (j=0;j<numCols;j++) {                                                //Iterate over each Col for curr data row
    row.nameOfCols[j] = dataObj[i].nameOfCols[j];
  }
  rows.push(row);
}

Using a variable property name to assign data to an object. How do you get around this?

The row.nameOfCols[j], because the property name can't be a variable.

And so as you can see in the end 'rows' is an array of objects.

Any help appreciated!

I would suggest some kind of enum or using an XML file to bypass the problem alltogether. — Angelos Chalaris, Mar 02 '16 at 16:33
This is a dupe of something and the answer basically amounts to *use bracket notation": `row[nameOfCols[j]] = dataObj[i][nameOfCols[j]];` — Paul, Mar 02 '16 at 16:37

score 1 · Accepted Answer · edited May 23 '17 at 12:23

To access a property that is defined as a variable, access it with []

var prop = "b";
var obj = {b: 2};
console.log(obj[prop]) // 2

// Your example
var rows = [];
var nameOfCols = ['id','timeType','existing','upgrade','childNode','budget'];
for (var i = 0; i < dataObj.length; i++) {
  var row = {};                                                 
  for (var j = 0; j < nameOfCols.length; j++) {
    var fieldName = nameOfCols[j];
    row[fieldName] = dataObj[i][fieldName];
  }
  rows.push(row);
}

awimley · Answer 2 · 2016-03-02T16:42:43.730

0

Try this:

rows = [];
nameOfCols = ['id','timeType','existing','upgrade','childNode','budget'];  //Populated from DB
for (i=0;i<numRows;i++) {
  var row = {};                                                  //Iterate over each row of data returned
  for (j=0;j<numCols;j++) {                                                //Iterate over each Col for curr data row
    row.nameOfCols[j] = dataObj[i][nameOfCols[j]];
  }
  rows.push(row);
}

Notice: dataObj[i][nameOfCols[j]] will evaluate nameOfCols[j] before trying to acces dataObj with that property name. The dot syntax will not evaluate nameOfCols[j] before accessing the property name.

For some reason the array[var] syntax evaluates var, while array.var is actually array["var"].

edited Mar 02 '16 at 16:42

answered Mar 02 '16 at 16:38

awimley

692
1
9
29

Error, `row` is not defined ;) The "For some reason" in your answer makes it look like you don't understand what is going on. Consider removing it. – Ruan Mendes Mar 02 '16 at 16:39
Wooops! I just copied OP's code. I'll edit to fix. – awimley Mar 02 '16 at 16:41

Javascript using variable property names to assign value

2 Answers2