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?

If your data set is rather static, you should hardcode it. There's no way to guess which type each column should be (unless they're all text except for the checkbox, but you'd probably want to change that at some point anyway). — Etheryte, Jan 07 '15 at 17:34
I don't understand how you are getting `data` and `type` from your source. — Nick Tomlin, Jan 07 '15 at 17:40

charlietfl · Answer 1 · 2015-01-07T18:22:37.217

2

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

edited Jan 07 '15 at 18:22

answered Jan 07 '15 at 17:51

charlietfl

170,828
13
121
150

so this solution is more comprehensive and was placed well before other answer, find it strange the other was selected – charlietfl Jan 07 '15 at 18:36
Charlietfl, I upvoted your answer. I'm selecting the other answer because it is closer to what I was envisioning, but didn't know how to code. I am trying to learn from your answer and I will be referring to it as I continue my work with js and handsontable. Thank you for spending the time to enter it. - Bill – user1592380 Jan 07 '15 at 18:44
is exactly the same with exception of using a function reference for map callback ... but that is your perogative – charlietfl Jan 07 '15 at 18:46

score 1 · Accepted Answer · answered Jan 07 '15 at 17:57

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.

This is exactly what I needed, thank you! But I don't understand "obj.check" does every object in JS have the ability to become a checkbox? — user1592380, Jan 07 '15 at 18:37
@user61629 `obj.check` just uses the dot operator (`.`) to access the `check` key of the `obj` object. If you assign to a key that doesn't exist, then the key is created. For example, if the object is `{car: 'Mercedes'}` and you do `var obj={car:'Mercedes',year:2006};obj.check=true;console.log(obj);`, you'll see that the object is now: `{car: 'Mercedes', year: 2006, check: true}`. — Max Heiber, Jan 07 '15 at 19:38

Create array of objects from javascript object keys

2 Answers2