从 javascript 对象键创建对象数组

Question

我正在尝试在可手动操作的电子表格上执行列映射，并且我想动态加载电子表格并在每一行前添加一个复选框。根据我的研究，包括 , it seems that the best way to do this is to create an array of objects for the handsontable "columns" property. You can see this at http://jsfiddle.net/kc11/o4d6gr6n/.

所以我需要做的是创建：

 [
            {data: "check", type: 'checkbox'},
            {data: "year", type: 'text'},
            {data: "car", type: 'text'},
            {data: "available", type: 'text'},
            {data: "comesInBlack", type: 'text'},
          ]

来自：

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

我首先获取列的键并在 'check' 列前面添加：

    var keys = $.map(getCarData()[0], function(element,key) { return key; }); 
keys.unshift("check");

但由于我对 JS 的了解有限，我不确定如何完成剩下的工作。谁能告诉我下一步该怎么做？

Answer 1

可以遍历数组并添加属性做类似的事情：

var myData = getCarData();
$.each(myData, function(){
    /* add new property "checked" */
    this.checked = false
});

/* or */
 var myData = $.map(getCarData(), function(row){
      row.checked = false;
      return row;
 });
/* returns rows like 
 {checked:false, car: "Mercedes A 160", year: 2006, available:....}*/

然后使用文档中的 checkbox template 列定义

var example2 = document.getElementById('example2');
var hot2 = new Handsontable(example2,{
  data:myData,
  columns: [
      {
      data: "checked",
      type: "checkbox",
      checkedTemplate: true,
      uncheckedTemplate: false
    },
     {data: "year", type: 'text'},
     {data: "car", type: 'text'},
     {data: "available", type: 'text'},
     {data: "comesInBlack", type: 'text'},
  ]
});

Answer 2

我认为您正在尝试向 getCarData 返回的数组中的每个对象添加一个 check 键。您没有为键指定值，所以我将它设置为每个对象的 true。

  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'}
    ];
  };
    //This is where I add the 'check' key
    var addCheckKey=function(obj){
        obj.check='true';
        return obj;
    };
    var data=$.map(getCarData(),addCheckKey);

生成此数据：

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

JSFiddle：http://jsfiddle.net/vb1om7om/2/

您之前的代码存在的问题是，您正在为 getCarData 生成的数组中的每个对象的键创建一个数组，并向该数组添加一个新项。这样做不会对原始对象产生影响。

从 javascript 对象键创建对象数组

Create array of objects from javascript object keys

javascript

jquery

handsontable