CODEWITHSUNDEEP
javascriptjqueryhandsontable
user1592380
user1592380

Reputation: 36237

Create array of objects from javascript object keys

I am trying to perform column mapping on a handsontable spreadsheet , and I want to dynamically load a spreadsheet and prepend each row with a checkbox. Based on my research and including How to add properties dynamically to each object in an javascript array , 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/.

So what I need to do is create:

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

from:

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

I started out by getting the keys of the columns and prepending the 'check' column:

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

but with my limited JS knowledge I'm not sure how to go the rest of the way. Can anyone advise me what to do next?

Upvotes: 0

Views: 158

Answers (2)

charlietfl
charlietfl

Reputation: 171679

Can loop over array and add the property doing something like:

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:....}*/

Then use the checkbox template column defintion from docs

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

Upvotes: 2

Max Heiber
Max Heiber

Reputation: 15502

I think you're trying to add a check key to each object in the array returned by getCarData. You didn't specify a value for the key, so I set it to true for each object.

  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);

Produces this data:

[{"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/

The problem with you code before was that you were creating an array of the keys of each object in the array produced by getCarData and adding a new item to that array. Doing so does not have an effect on the original object.

Upvotes: 1

Related Questions