我们如何使用OPENUI5 / SAPUI5使用JSON数据？ [英] How can we consume JSON data using OPENUI5/SAPUI5?
问题描述
我是SAPUI5 / OPENUI5的新手。
我正在尝试一个示例程序来从域中使用json数据并将其显示在我的openui5表中。我已经尝试了两种方法来获取数据并将其绑定到表控件。但是我无法使用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.
提前致谢。
请找到以下两种方法：
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"
}
]
方法1：我使用php文件来回显JSON数据并在我的ui5屏幕中使用它。
当我单独访问运行php文件时，它会生成数据并在屏幕上打印数据。
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.
我得到的错误是没有调用getJSON。
Error I get is getJSON is not called.
代码：
<!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>
方法2：我试图直接在我的域上访问JSON文件并访问数据。
Approach 2 : I am trying to access the JSON file directly on my domain and access the data.
代码与上面相同，但url除外。
Url用于此方法是（mydomain / players.json）其中players.json包含上述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.
请帮助我理解这个概念JSON数据处理。
Please help me in understanding the concept of JSON data handling.
问候，
Rajan
Regards, Rajan
推荐答案
首先：SAPUI5构建在jQuery上，是的。但是不应该在SAPUI5应用程序中使用jQuery。
First of all: SAPUI5 is built onto jQuery, yes. But there should be no need to use jQuery inside your SAPUI5 Application.
使用 JSONModel 加载JSON-Data。 JSONModel也可以从URL加载数据。
请参阅 文档
Use a JSONModel to load JSON-Data. Also the JSONModel can load the data from URL. See the Documentation
这将如下所示：
// 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');
此后您可以在sap.ui.core中注册此模型：
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.
现在让我们创建表：
// 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}'
});
小心行：'{/ 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.
现在通过添加列并将表添加到表来完成演示。 DOM：
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');
多数民众赞成。如果它不起作用，这是一个正在运行的 DEMO 。
Thats it. If it doesn't work, here is a running DEMO.
这篇关于我们如何使用OPENUI5 / SAPUI5使用JSON数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
