CODEWITHSUNDEEP
javascriptqooxdoo
user3736646
user3736646

Reputation: 21

how to bind qooxdoo table model from external json file

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!

Upvotes: 1

Views: 734

Answers (1)

saaj
saaj

Reputation: 25273

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.

Upvotes: 1

Related Questions