如何动态地向javascript数组中的每个对象添加属性

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

Answer 1

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.

Answer 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  = 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 (eg use the car model to determine which dynamic value to assign the object, the car year, etc).