How To Add Properties Dynamically To Each Object In An Javascript Array

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

Solution 1:

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

varcars= [
  {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.

Solution 2:

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

}

functiongetCarData() {
    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 = newPrependableObject(obj),
        newObj = obj.prepend('check', false);

    carData[index] = newObj;
});

// To prove the keys are in the correct ordervar 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).