How can we consume JSON data using OPENUI5/SAPUI5?

I am new to SAPUI5/OPENUI5. I am trying out a sample program to consume json data from a domain and display it in my openui5 table. I have tried two methods to get the data and bind it to table control.But I am not able to generate the table with the json data. Please let me know my mistake in the code. And also please refer me some links to understand the concept in a better way.

Thanks in advance.

Please find the two approaches below :

JSON Data :

[
  {
    "name": "Rajesh"
  },
  {
    "name": "Kunal Jauhari"
  },
  {
    "name": "Ashish Singh"
  },
  {
    "name": "Ansuman Parhi"
  },
  {
    "name": "Arup Kumar"
  },
  {
    "name": "Deepak Malviya"
  },
  {
    "name": "Seshu"
  },
  {
    "name": "Ankush Datey"
  },
  {
    "name": "Tapesh Syawaria"
  },
  {
    "name": "Mahesh"
  },
  {
    "name": "Vinay Joshi"
  },
  {
    "name": "Ardhendu Karna"
  },
  {
    "name": "Abhishek Shukla"
  },
  {
    "name": "Kashim"
  },
  {
    "name": "Vinayak"
  }
]

Approach 1 : I am using a php file to echo the JSON data and use it in my ui5 screen. When I access the run the php file individually, it generates the data and prints the data on screen.

Error I get is getJSON is not called.

Code :

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>


        <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
                id="sap-ui-bootstrap"
                data-sap-ui-libs="sap.ui.commons,sap.ui.table"
                data-sap-ui-theme="sap_bluecrystal">
        </script>
        <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

        <script>
        var json_url = "http://mydomain/teamdetails_ui5.php?t=6";
            $.ajax({
                url : json_url,
                jsonpCallback : 'getJSON',  
                contentType : "application/json",
                dataType: 'jsonp',


                success: function(data,textStatus,jqXHR) {
                    oModel.setData({data: data});
                    sap.ui.getCore().setModel(oModel);

                    var oTable1 = new sap.ui.table.Table({  
                        title : "Players List",  
                        visibleRowCount : 3,  
                        selectionMode : sap.ui.table.SelectionMode.Single,  
                        navigationMode : sap.ui.table.NavigationMode.Paginator,  
                    });

                    //Define the columns and the control templates to be used    
                    oTable1.addColumn(new sap.ui.table.Column({  
                        label : new sap.ui.commons.Label({  
                        text : "Player Name"  
                    }),  
                    template : new sap.ui.commons.TextView().bindProperty(  
                    "text", "name"),  
                    width : "10px"  
                    }));

                    oTable1.setModel(oModel);  
                    oTable1.bindRows("/oModel");  
                    oTable1.placeAt('table_cont');  

                },
                error : function(jqXHR,textStatus,errorThrown) {
                    alert("Oh no, an error occurred");
                    alert(jqXHR);
                    alert(textStatus);
                    alert(errorThrown);             
                }
            });

        </script>

    </head>
    <body class="sapUiBody" role="application">
        <div id="table_cont"></div>
    </body>
</html>

Approach 2 : I am trying to access the JSON file directly on my domain and access the data.

Code is the same as above except url. Url is used for this approach is (mydomain/players.json) where players.json contain the above json data.

Please help me in understanding the concept of JSON data handling.

Regards, Rajan

标签： javascript json sapui5

1条回答

孤傲高冷的网名

2楼-- · 2019-06-02 22:36

First of all: SAPUI5 is built onto jQuery, yes. But there should be no need to use jQuery inside your SAPUI5 Application.

Use a JSONModel to load JSON-Data. Also the JSONModel can load the data from URL. See the Documentation

this will look like:

// create a "json" Model
var oModel = new sap.ui.model.json.JSONModel();
// load data from URL
oModel.loadData('http://mydomain/teamdetails_ui5.php?t=6');

after this you can register this model in your sap.ui.core with:

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

after this line every control can use the data from this model by simple binding-syntax.

Now lets create the table:

// create your table
var oTable1 = new sap.ui.table.Table({  
   title : "Players List",  
   visibleRowCount : 3,  
   selectionMode : sap.ui.table.SelectionMode.Single,  
   navigationMode : sap.ui.table.NavigationMode.Paginator,
   // bind the core-model to this table by aggregating player-Array
   rows: '{/player}'
});

beware of the part with "rows: '{/player}'". This is the only thing that has to be done to get the data from the model inside your table.

now finish the demo by adding the column and add the table to the DOM:

// define the columns and the control templates to be used    
oTable1.addColumn(new sap.ui.table.Column({  
   label : new sap.ui.commons.Label({  
      text : "Player Name"  
   }),  
   template : new sap.ui.commons.TextView({
      text: '{name}'
   }),
   width : "10px"  
}));

//place at DOM
oTable1.placeAt('content');

Thats it. If it doesn't work, here is a running DEMO.

0人赞添加讨论(0) 举报

How can we consume JSON data using OPENUI5/SAPUI5?

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间