CODEWITHSUNDEEP
sapui5
Themasterhimself
Themasterhimself

Reputation: 1016

How to display JSONModel data using "sap.ui.table.DataTable"?

I'm trying to bring data from an internal table in a ABAP program into an SAPUI5 application.

From the ABAP side, I have converted the required data into JSON format and sending it across like it is mentioned in the a guide.

I have written the following code in the 'Read' section of the controller

$.ajax({
  type: 'GET',
  url: 'http://socw3s1er67.solutions.glbsnet.com:8000/sap/bc/Z_tets_json?sap-client=950',
  success: function(data) {
    alert(data[1].PROJECT);
    alert(data[0].MANDT);
    var oModel_Projects = new sap.ui.model.json.JSONModel();
    oModel_Projects.setData({ modelData: data });
  }
});

Sample JSON response from the server:

[
  {
    "MANDT": "PJ1",
    "PROJECT": "Test Project1",
    "DESCRIPTION": ""
  },
  {
    "MANDT": "PJ2",
    "PROJECT": "Test Project2",
    "DESCRIPTION": ""
  }
]

The alerts seem to be working fine and are returning expected data from the internal tables.

I want to know: how to bind this data into a particular table using models?

Upvotes: 0

Views: 3724

Answers (2)

Tom Burger
Tom Burger

Reputation: 667

Well, your code looks ok, but there are other parts, which are missing, and there might be a problem there...

How is your table constructed - ? It should be:

var table = new sap.ui.table.DataTable({
    title: 'My first table',
    width: '100%'
});

Do you make following calls to connect table and model?

table.setModel(oModel_Projects);
table.bindRows("modelData");

Are you properly creating columns of the table? 

label = new sap.ui.commons.Label({ text: 'Client' });
template = new sap.ui.commons.TextView({ text: '{MANDT}' });
col = new sap.ui.table.Column({ label: label, template: template });
table.addColumn(col);

Is table properly placed into HTML using placeAt method?

Upvotes: 1

Gaurav Pandey
Gaurav Pandey

Reputation: 2796

Updated the answer after your clarification: Try this parser:

var html = "<table><tr><td>MANDT</td><td>PROJECT</td><td>DESCRIPTION</td></tr>";
    for(var index in data){
html+="<tr><td>"+data[index].MANDT+"</td><td>"+data[index].PROJECT+"   </td><td>"+data[index].DESCRIPTION+"</td></tr>";
    }
html+="</table>";
//now you can insert this html into some div like as follows: $("#div1").html(html);

Or google for some jquery gridview as I suggested in the comment.

Upvotes: 1

Related Questions