1

I am trying to create a table which will show the contents available in an external JSON file.

Can you please tell me how I can achieve this.

I have written these codes, but no idea how to do this. 

var req = new qx.io.remote.Request("resource/testtable/json/table.csv", "GET", "text/plain");

req.addListener("completed", function(e) {
    //alert(e.getContent());
    // result = [["Jahr","Wert"],[1999,34.4],[2000,45.0],[2001,199.0]]

    var data = e.getContent();
    // alert(typeof(data));
    // result = string

    var test = new qx.data.Array;
    test = qx.lang.Json.parse(data);
    alert(typeof(test));

    alert(test[0]);


    var tableModel = new qx.ui.table.model.Simple();
    tableModel.setColumns(["col1", "col2", "col3"]);
    tableModel.setData(e.getContent());
    var table = new qx.ui.table.Table(tableModel);

    composite.add(table);

});

req.send();

JSON file content: 

childBox: {
1: {
    "col1": "1000 Unique Result in Row1",
    "col2": "101, 102, 103, 104",
    "col3": "Result are done"
},
2: {
    "col1": "1000 Unique Result in Row2",
    "col2": "101, 102, 103, 104",
    "col": "Result are done"
},
3: {
    "col": "1000 Unique Result in Row3",
    "col2": "101, 102, 103, 104",
    "col3": "Result are done"
}
}

Thanks in advance!

Sully
  • 14,672
  • 5
  • 54
  • 79
user3736646
  • 21
  • 3

1 Answers1

1

Qooxdoo has no table controller or binding-capable table model out-of-the-box. But if you only need just to set the data once you don't lose much. There're some subtleties in table model API.

var data = {childBox: {
  1: {
    "col1": "1000 Unique Result in Row1",
    "col2": "101, 102, 103, 104",
    "col3": "Result are done"
  },
  2: {
    "col1": "1000 Unique Result in Row2",
    "col2": "101, 102, 103, 104",
    "col": "Result are done"
  },
  3: {
    "col": "1000 Unique Result in Row3",
    "col2": "101, 102, 103, 104",
    "col3": "Result are done"
  }
}};

var rows = Object.keys(data.childBox).map(function(key)
{
  return data.childBox[key];
});

var tableModel = new qx.ui.table.model.Simple();
tableModel.setColumnIds(["col1", "col2", "col3"]);
tableModel.setColumnNamesByIndex(["Column #1", "Column #2", "Column #3"]);
tableModel.setDataAsMapArray(rows);

var table = new qx.ui.table.Table(tableModel);
this.getRoot().add(table, {left: 0, right: 0});

Run it in Qooxdoo playground.

saaj
  • 23,253
  • 3
  • 104
  • 105
  • one more thing... when I am reading the content from file then it is working fine in the firefox .. but not working in the chrome... any idea .. why it is happening.. ? – user3736646 Jun 30 '14 at 05:36
  • Chrome is more restrictive on file:// protocol treating different folders in terms of SOP. You can run Chrome with ``--allow-file-access-from-files`` (see http://stackoverflow.com/questions/16487803) to circumvent it. Alternatively you can use qooxdoo ``source-server`` generator job. – saaj Jun 30 '14 at 10:04