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

时间:2015-01-02 23:13:21

标签: javascript object handsontable

我试图遍历一个对象数组,为每个对象添加一个属性和值。表的顺序很重要,因为我试图使用一个handontable视图作为客户端来检索服务器端mysql表的内容。我希望handontable视图具有与表相同的列顺序,但我想插入一个复选框列作为第一列以允许记录选择。我有一个小提琴http://jsfiddle.net/kc11/juo1e4at/#base来完成循环,但我不确定如何预先添加每个对象的属性 - 值对。数组unshift似乎是为数组。我希望看到一个物体的结果:

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

为:

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

我怎样才能实现这一目标

2 个答案:

答案 0 :(得分:3)

Javascript对象中的属性顺序并不重要,它们不是严格排序的。
给定

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'}
];

如果您没有准备好从后端发送该属性,或者由于其他原因(较小的有效负载大小等)希望在前端执行此操作,则可以执行以下操作。

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

现在,回到Handsontable列顺序问题(这实际上是问题的主要问题),您可以按如下方式定义:

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

有关详细信息,请参阅the manual

答案 1 :(得分:0)

以下是使用小提琴中的getCarData函数的示例。它允许您通过将此功能包装在一个简单的类(称为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]);

});

更新了小提琴:

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

当然,forEach循环中的逻辑可以执行任何操作(例如,使用汽车模型来确定分配对象的哪个动态值,汽车年份等)。