Why data sent by JSON are not displayed correctly in table?

Question

I have a problem with displaying my JSON in table correctly. I am using handsontable to built a grid on website. As I think, all I need to do is to send the data in correct JSON format to handsontable link.

I am using struts2-json-plugin to serialize Java object to JSON format and this JSON below is generated by the plugin automatically.

Unfortunatelly after send JSON to handsontable, in the table there are only values like [object Object] which occurs in the first cell of table only, instead of real values which should appear in whole row (in different columns), not only in the first cell...

• Screenshot with my wrong table columns and values:

• Screenshot with expected table columns and values:

I am sending JSON from backend like this:

{
  "values": [
    {
      "fieldDTO": [
        {
          "value": "Elda"
        },
        {
          "value": "HCPP"
        },
        {
          "value": "Yes"
        },
        {
          "value": "Green"
        }
      ]
    }
  ],
  "headers": [
    "Name",
    "Qualification",
    "Certification",
    "Classification"
  ],
  "rows": [
    "Albania"
  ]
};

Displaying table like this:

<div id="spreadsheet"></div>
$("#spreadsheet").handsontable({
  startRows: 4,
  startCols: 20,
  rowHeaders: data.rows,
  colHeaders: data.headers,
  data: data.values,
  contextMenu: true,
  width: 1000,
  manualColumnResize: true,
  manualColumnMove: true,
  columnSorting: true
});

FIDDLE: You can check it in FIDDLE HERE.

Why it fails? Is my JSON format incorrect to display data in each column? I need to display List of collection FieldDTO in one row, so that's why the JSON has form as above. How to make this code (displaying data in table) to work correctly?

Answer 1

You need to specify a columns attribute in the handontable called in order to dig into your (slightly strange, see below) data structure:

http://jsfiddle.net/dwu2E/

$("#spreadsheet").handsontable({
  // etc...
  columns: [
    { data: "fieldDTO.0.value" }, 
    { data: "fieldDTO.1.value" }, 
    { data: "fieldDTO.2.value" },
    { data: "fieldDTO.3.value" }
  ]
});

See the docs for the array syntax for more info.

I say "strange" because it would be a lot nicer to have appropriately-named columns in an object instead of in an array. Position-based structures are brittle.