cancel
Showing results for 
Search instead for 
Did you mean: 

SAP UI5 table with JSON format service data is not working

naveen_inuganti2
Active Contributor
0 Kudos

Please check below code:

Controller:

onInit: function() {

                 var oModel = new sap.ui.model.json.JSONModel();

                       $.ajax({

               type: 'GET',

               url: '......./sap/ZNAV_SM6_SRV/Output',

             success: function (data) {

                       oModel.setData({

                            modelData : data

                             });

               }

           });

                                this.getView().setModel(oModel);

                                var oTable = new sap.ui.table.Table;

                                oTable = this.byId("oTab");

                                oTable.setModel(oModel);

             },

View:-

var oTable = new sap.ui.table.Table({

                        title: "Table Example",

                  id: this.createId("oTab"),

                        selectionMode: sap.ui.table.SelectionMode.Single,

            columns: [

                        new sap.ui.table.Column({

                            label: new sap.ui.commons.Label({ text: "Field Label" }),

                            template: new sap.ui.commons.TextView().bindProperty("text", "d/results/TrNo"),//                          sortProperty: "tr",

                              width: "40px",

                              hAlign: "Center"

                        })

                        ]

            });

oTable.bindRows("/modelData");

      //Bring the table onto the UI

              oTable.placeAt("content");

HTML Page:

<!DOCTYPE HTML>

<html>

       <head>

              <meta http-equiv="X-UA-Compatible" content="IE=edge">

                                   <script src="resources/sap-ui-core.js"

                      id="sap-ui-bootstrap"

                      data-sap-ui-libs="sap.ui.commons,sap.ui.core,sap.ui.ux3,sap.ui.table"

                      data-sap-ui-theme="sap_goldreflection" >

              </script>

              <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

                                   <script>

                                       sap.ui.localResources("otable");

                     var view = sap.ui.view({id:"idoTable1", viewName:"otable.oTable", type:sap.ui.core.mvc.ViewType.JS});

                                          view.placeAt("content");

                                   </script>

       </head>

       <body class="sapUiBody" role="application">

              <div id="content"></div>

       </body>

</html>

Service response:

{

  "d": {

    "results": [

      {

        "__metadata": {

          "uri": "....p/opu/odata/sap/ZNAV_SM6_SRV/Output('SAMPLE2')",

          "type": "ZNAV_SM6_SRV.OUTPUT"

        },

        "TrSys": "AB",

        "SrSys": "PQ",

        "TrNo": "SAMPLE2"

      },

...etc.

This application is not returning any data. This is working fine if I convert oModel to new sap.ui.model.odata.ODataModel, which means I have issue with JSON format only.

I received bunch of help on same topic but nothing is working for me.. I thought http://scn.sap.com/thread/3308554 solution works for me.. But not sure where I am doing wrong... still checking... want to see if I can get any help!

Thanks,

Naveen

Accepted Solutions (1)

Accepted Solutions (1)

naveen_inuganti2
Active Contributor
0 Kudos

Thanks to Chandrasekhar.. this blog helped me!

Here is the code: (doing everything under html page, for testing)

<!DOCTYPE html> 

<html> 

<head> 

<!-- Added charset='utf-8' to handle data in various langauges --> 

<meta http-equiv='X-UA-Compatible' content='IE=edge' charset='utf-8' /> 

<title>Weather Forecast</title> 

<!-- Load UI5, select gold reflection theme and the "commons" and "table" control libraries --> 

<script id='sap-ui-bootstrap' type='text/javascript' 

          src='resources/sap-ui-core.js' data-sap-ui-theme='sap_platinum' 

          data-sap-ui-libs='sap.ui.commons,sap.ui.table'></script> 

                                   <script type="text/javascript">

              //Create an instance of the table control   

              var oTable = new sap.ui.table.Table({ 

              title : "Details" }); 

              //Define the columns and the control templates to be used   

                   oTable.addColumn(new sap.ui.table.Column({ 

                   label : new sap.ui.commons.Label({ text : "Field Label" }), 

                   template : new sap.ui.commons.TextView().bindProperty("text", "TrNo"), 

                   width : "50px" }));

                                   var oModel = new sap.ui.model.json.JSONModel();

               var url = '..../ZNAV_SM6_SRV/Output';

                                            $ 

                                                                .ajax({ 

                                                                          url : url, 

                                                                          jsonpCallback : 'getJSON', 

                                                                          contentType : "application/json", 

                                                                          dataType : 'json', 

                                                                          success : function(data, textStatus, jqXHR) { 

                   oModel.setData(data); 

                   sap.ui.getCore().setModel(oModel); 

                             //Create a model and bind the table rows to this model   

                             var oModel1 = new sap.ui.model.json.JSONModel(); 

                           //Get the forecastday array table from txt_forecast object   

                       var aData = oModel.getProperty("/d/results"); 

                           oModel1.setData({ modelData : aData }); 

                                        oTable.setModel(oModel1); 

                                                                          } 

                                                                }); 

                                      oTable.bindRows("/modelData"); 

                                     oTable.placeAt('content'); 

                                                  </script> 

                                  </head> 

                                  <body class='sapUiBody'> 

                                            <div id='content'></div> 

                                            </div> 

                                  </body> 

                                  </html>

Thanks,

Naveen Inuganti

former_member182302
Active Contributor
0 Kudos

Hi Naveen,

what ever i was trying am getting blank output don know why? there are no errors. All i was trying to do is get JSON formed out of table and get it in the output.Can you help me with pointers on how to debug?

Regards,

Krishna Tangudu

naveen_inuganti2
Active Contributor
0 Kudos

Hi Krishna,

Please post your code snippet here, if possible.

What is response that you are getting for your service call in F12 Developer Tools -> Network?

Hope you are not facing CORS issues etc.., Let's see if your service call is success in above window.

You can enable debugging option in your browser settings and type in Debugger keyword whereever you want to debug your application. (That is one way I know to debug).

Thanks,

Naveen

former_member189237
Participant
0 Kudos

This message was moderated.

Former Member
0 Kudos

This message was moderated.

former_member189237
Participant
0 Kudos

Will you please post your code if possible

Thanks

Navdeep

Former Member
0 Kudos

Hi Naveen and Navdeep,

I think the problem is that my odata service is returning a single entity and I was trying to bind table rows with it. I have asked the team to modify the service. I will try again with the proper service and get back with the code in case of any issue.

Answers (1)

Answers (1)

Former Member
0 Kudos

Hi Naveen,

I am getting the json data fine. But the binding is giving issues. I am not getting any errors. But a blank table is displayed.

I have a table with dropdowns and the data needs to be bound to them. Any idea where am i going wrong?

naveen_inuganti2
Active Contributor
0 Kudos

Please post your code if possible.

Regards,

Naveen Inuganti

0 Kudos

Thread is now locked.  Once a Discussion has been marked answered, create a new Discussion instead of resurrecting the dead.  See the Rules of Engagement in the Getting Started link at the top right of every SCN page for why this action was taken.

Regards, Mike (Moderator)

SAP Technology RIG