如何使用OPENUI5/SAPUI5使用JSON数据?

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.

我刚到SAPUI5/OPENUI5。我正在尝试一个示例程序，从一个域中使用json数据并在openui5表中显示它。我尝试了两种方法来获取数据并将其绑定到表控件。但是我不能用json数据生成表。请让我知道我在代码中的错误。也请参考我的一些链接，以更好的理解这个概念。

Thanks in advance.

提前谢谢。

Please find the two approaches below :

请找到以下两种方法:

JSON Data :

JSON数据:

[
  {
    "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.

方法1:我使用一个php文件来响应JSON数据，并在我的ui5屏幕上使用它。当我单独访问运行php文件时，它会生成数据并在屏幕上打印数据。

Error I get is getJSON is not called.

我得到的错误是getJSON没有被调用。

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.

方法2:我尝试直接访问我的域上的JSON文件并访问数据。

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.

代码与上面除了url相同。此方法使用的Url是(mydomain/players.json)。json包含上述json数据。

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

请帮助我理解JSON数据处理的概念。

Regards, Rajan

问候,拉詹

1 个解决方案

#1

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

首先:SAPUI5构建在jQuery之上，是的。但是不需要在SAPUI5应用程序中使用jQuery。

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

使用JSONModel加载json数据。JSONModel还可以从URL加载数据。看文档

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中注册该模型。核心:

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.

小心“行:{/player}”的部分。这是惟一需要做的事情，以便从表内的模型中获取数据。

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

现在，通过添加列并将表添加到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.

这是它。如果它不起作用，这是一个运行的演示。

#1