簡體   English   中英

如何動態地向javascript數組中的每個對象添加屬性

[英]How to add properties dynamically to each object in an javascript array

我試圖遍歷對象數組,為每個對象添加屬性和值。 表的順序很重要,因為我試圖將handontable視圖用作客戶端來檢索服務器端mysql表的內容。 我希望handsontable視圖具有與表相同的列順序,但是我想插入復選框列作為第一列以允許選擇記錄。 我有一個小提琴http://jsfiddle.net/kc11/juo1e4at/#base來執行循環,但是我不確定如何在每個對象的屬性-值對之間添加前綴。 數組取消移位似乎是針對數組的。 我想要一個對象的結果來自:

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

至:

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

我怎樣才能做到這一點

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*/
  ]
});

有關更多信息,請參見手冊

這是在小提琴中使用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循環中的邏輯可以做任何事情(例如,使用汽車模型來確定要分配對象的動態值,汽車年份等)。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM