How to add properties dynamically to each object in an javascript array

Question

I am trying to loop through an array of objects to prepend a property and value to each object . The order of the tables is important because I am trying to use a handsontable view as a client to retrieve the contents of a server side mysql table. I want the handsontable view to have the same column order as the table , but I want to insert a checkbox column as the first column to allow record selection. I have a fiddle http://jsfiddle.net/kc11/juo1e4at/#base that does the loop, but I'm not sure how to prepend each object's property-value pair. array unshift appears to be for arrays. I'd like a result of an object to look go from:

Object { car="Audi A4 Avant", year=2011, available=true, more...}

to:

Object { checkbox=false, car="Audi A4 Avant", year=2011, available=true, more...}

How can I make this happen

Take the object and write `anObject.checkbox = false`? "Prepending" doesn't really make a lot of sense for named properties. — Dave Newton, Jan 02 '15 at 23:16
Yup, simply set the new property to a value and it will add it to the object. — EvilZebra, Jan 02 '15 at 23:17
Kim, The order of the properties does matter because I want to prepend a handsontable checkbox column. — user1592380, Jan 02 '15 at 23:19
Understood. So this brings up the question of how to recreate the columns of a db table in the correct order when transmitting the data from a a db backed server side location ( in my case mysql-php) to the browser via ajax. Maybe I should be creating and transmitting JSON instead of objects — user1592380, Jan 02 '15 at 23:33
@agentpx Not really a duplicate, as at the core, this is a question about something else. — Etheryte, Jan 02 '15 at 23:40
@user61629 You should edit the question to explain _why_ you're trying to do what you're asking. — Etheryte, Jan 02 '15 at 23:42
@user61629 I would hope the object's property names match the db column names. Generally, try not to rely on the order of properties when designing solutions, this can become messy in future if columns are removed or added. — Lee Kowalkowski, Jan 02 '15 at 23:50
Lee, the column names match the property names. Nit, I made your suggested changes. — user1592380, Jan 03 '15 at 00:39

score 3 · Accepted Answer · answered Jan 02 '15 at 23:38

The order of properties in a Javascript object doesn't matter, they aren't strictly ordered.
Given

var cars = [
  {car: "Mercedes A 160", year: 2006, available: true, comesInBlack: 'yes'},
  {car: "Citroen C4 Coupe", year: 2008, available: false, comesInBlack: 'yes'},
  {car: "Audi A4 Avant", year: 2011, available: true, comesInBlack: 'no'},
  {car: "Opel Astra", year: 2004, available: false, comesInBlack: 'yes'},
  {car: "BMW 320i Coupe", year: 2011, available: false, comesInBlack: 'no'}
];

You can simply do the following if you don't have the property ready to send from the backend or want to do it in the frontend for other reasons (smaller payload size etc).

for (i in cars) {
  cars[i].checkbox = false;
}

Now, coming back to the issue of Handsontable column order (which is actually the main problem of the question), you can define it as follows:

var hot = new Handsontable(container,{
  data: cars,
  /* Other config */
  columns: [
    {data: "checkbox", type: 'checkbox'},
    {data: "car", type: 'text'}
    /*Other columns*/
  ]
});

See the manual for further info.

Nit, Is it fair to say that although the ajax transmitted javascript objects from the server side do not have an order to their properties property this is set solely by the columns property which takes an array (ordered) of objects in handsontable? — user1592380, Jan 03 '15 at 00:59
@user61629 Yes, that is correct. The order of the columns is defined by the `columns` configuration. If it isn't set there, the order may be arbitrary. — Etheryte, Jan 03 '15 at 11:30

foxygen · Answer 2 · 2015-01-03T00:41:12.747

Here is an example using the getCarData function in your fiddle. It allows you to prepend keys to an object by wrapping this functionality in a simple class (called PrependableObject).

PrependableObject = function(obj){

    this.obj = obj;

}

PrependableObject.prototype.prepend = function(key, val){

    var newObj  = new Object(),
        oldKeys = Object.keys(this.obj);

    newObj[key] = val;

    for (var i=0; i< oldKeys.length; i++){

        newObj[oldKeys[i]] = this.obj[oldKeys[i]];
    }

    return newObj;

}

function getCarData() {
    return [
      {car: "Mercedes A 160", year: 2006, available: true, comesInBlack: 'yes'},
      {car: "Citroen C4 Coupe", year: 2008, available: false, comesInBlack: 'yes'},
      {car: "Audi A4 Avant", year: 2011, available: true, comesInBlack: 'no'},
      {car: "Opel Astra", year: 2004, available: false, comesInBlack: 'yes'},
      {car: "BMW 320i Coupe", year: 2011, available: false, comesInBlack: 'no'}
    ];
 }

var carData = getCarData();

carData.forEach(function(obj, index){

    var obj = new PrependableObject(obj),
        newObj = obj.prepend('check', false);

    carData[index] = newObj;
});

// To prove the keys are in the correct order
var car1 = carData[0];

Object.keys(car1).forEach(function(key, i){

    console.log(key + ' = ' + car1[key]);

});

Updated fiddle:

http://jsfiddle.net/juo1e4at/4/

Of course, the logic in your forEach loop could do anything (e.g. use the car model to determine which dynamic value to assign the object, the car year, etc).

Thank you, that does answer the question the only issue is order ( or lack thereof ) in an object. Please see my note above. — user1592380, Jan 02 '15 at 23:35

How to add properties dynamically to each object in an javascript array

2 Answers2

Linked