Create array of objects from javascript object keys

Question

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?

Answer 1

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.