Handson table : adding Column Property is not displaying JSON data

Question

I have a handsontable and I am trying to display the Json data on handsontable. Below is the code. Problem that I am having with is, if add the column property of the handsontable, it will not display the Json data on handsontable but if I remove it, it works perfectly fine.

$(document).ready(function () {
   objectData = [{ id: "dd1", name: 'bb' }, { id: "dd2", name: 'dd' }];
   // objectData = [["aa", "bb"], ["cc", "dd"]];
   var $container = $("#example");
   $container.handsontable({
        data:objectData,
        rowHeaders: true,
        colHeaders: true,
        columns:[ {type: 'text'}, { type: 'text' }],
    });
});

I have not got any error message but it is not populating the handsontable with JSon data(objectData). Also if I ignore this part and try enter the values on cell and get those for later saving into db, values I am getting is combined values of default value which is objectData and the value I entered on cells.

ZekeDroid ZekeDroid · Accepted Answer · 2015-05-05T19:15:14

If you specify the columns option, you have to add, on top of the type option you have there, the data option with the name of the key. This is what you should be writing to use maps in your data:

$(document).ready(function () {
   objectData = [{ id: "dd1", name: 'bb' }, { id: "dd2", name: 'dd' }];
   // objectData = [["aa", "bb"], ["cc", "dd"]];
   var $container = $("#example");
   $container.handsontable({
        data:objectData,
        rowHeaders: true,
        colHeaders: true,
        columns:[ {type: 'text', data: 'id'}, { type: 'text', data: 'name' }],
    });
});

The reason being that you're specifying what data to use for which column. This happens because javascript objects are not in order so there would be no way to display in the right order otherwise.

Handson table : adding Column Property is not displaying JSON data

1 Answers