javascript - How can we consume JSON data using OPENUI5SAPUI5?

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=".js"
                id="sap-ui-bootstrap"
                data-sap-ui-libs="sap.uimons,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.uimons.Label({  
                        text : "Player Name"  
                    }),  
                    template : new sap.uimons.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

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./resources/sap-ui-core.js"
                id="sap-ui-bootstrap"
                data-sap-ui-libs="sap.ui.mons,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.mons.Label({  
                        text : "Player Name"  
                    }),  
                    template : new sap.ui.mons.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

Share Improve this question edited May 18, 2014 at 18:13 W Kristianto 9,3337 gold badges48 silver badges72 bronze badges asked May 18, 2014 at 18:04 rajan 211 gold badge1 silver badge5 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

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.mons.Label({  
      text : "Player Name"  
   }),  
   template : new sap.ui.mons.TextView({
      text: '{name}'
   }),
   width : "10px"  
}));

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

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How can we consume JSON data using OPENUI5SAPUI5? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)