在 UI5 表中绑定 JSON 数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25130405/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Binding JSON data in UI5 table
提问by user3905218
I"m trying to show some JSON data into UI5. I'm able to load the data and is also able to access it to show in independent fields. For ex, if I'm trying to show the data in a text view I'm able to show it. But it does not seem to work in case of a table.
我正在尝试将一些 JSON 数据显示到 UI5 中。我能够加载数据，也能够访问它以在独立字段中显示。例如，如果我试图在文本视图中显示数据，我'm 能够显示它。但它似乎在桌子的情况下不起作用。
Below is how I'm trying to do it(done in ajax success handler method):
以下是我尝试这样做的方法（在 ajax 成功处理程序方法中完成）：
var oModel1 = new sap.ui.model.json.JSONModel();
var aData = jsonModel.getProperty("{/list}");
oModel1.setData({modelData : aData});
weatherTable.setModel(oModel1);
weatherTable.bindRows("/modelData");
weatherTable.placeAt('content');
Updating the complete code within the script tag of index.html which shows what is jsonModel & it is not null.
更新 index.html 的 script 标签内的完整代码，显示什么是 jsonModel 并且它不为空。
<script>
var url = "http://api.openweathermap.org/data/2.5/group?id=524901,703448,2643743&units=metric";
jQuery.ajax({
url : url,
dataType : "json",
success : function(data, textStatus, jqXHR){
var jsonModel = new sap.ui.model.json.JSONModel();
alert("status: " +textStatus);
alert(data);
jsonModel.setData(data);
sap.ui.getCore().setModel(jsonModel);
var weatherTable = new sap.ui.table.Table({
title : "Current Weather Details",
visibleRowCount : 4
});
weatherTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({text : "Country"}),
template : new sap.ui.commons.TextView().bindText("country")
}));
weatherTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({text : "City"}),
template : new sap.ui.commons.TextView().bindText("sunrise")
}));
weatherTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({text : "Weather"}),
template : new sap.ui.commons.TextView().bindText("sunset")
}));
//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 = jsonModel.getProperty("{/sys}");
alert(jsonModel);
var aData = jsonModel.getProperty("{/list}");
//alert(aData);
oModel1.setData({modelData : aData});
//oModel1.setData(data);
alert(oModel1.getJSON());
weatherTable.setModel(oModel1);
weatherTable.bindAggregation("rows","/modelData");
weatherTable.placeAt('content');
var dataLayout = new sap.ui.layout.HorizontalLayout({
id : "dataLayout", // sap.ui.core.ID
});
var country = new sap.ui.commons.TextView({
id : "country",
//text : '{/sys/country}'
text : '{/list/0/sys/country}'
})
var city = new sap.ui.commons.TextView({
id : "city", // sap.ui.core.ID
//text : '{/name}', // string
text : '{/list/0/name}', // string
});
var weatherDesc = new sap.ui.commons.TextView({
id : "weather", // sap.ui.core.ID
//text : '{/weather/0/description}', // string
text : '{/list/0/weather/0/description}', // string
});
dataLayout.addContent(country);
dataLayout.addContent(city);
dataLayout.addContent(weatherDesc);
dataLayout.placeAt("content");
}
});
</script>
When I alert aData, I get it as null as getProperty on the model is not returning anything. That's where the problem is. May be the way I'm trying to access the list is wrong.
当我提醒 aData 时，我将其设为 null，因为模型上的 getProperty 没有返回任何内容。这就是问题所在。可能是我尝试访问列表的方式错误。
Below is the JSON data returned:
下面是返回的 JSON 数据：
{
"cnt": 3,
"list": [
{
"coord": {
"lon": 37.62,
"lat": 55.75
},
"sys": {
"type": 1,
"id": 7323,
"message": 0.0208,
"country": "RU",
"sunrise": 1407202987,
"sunset": 1407259673
},
"weather": [
{
"id": 800,
"main": "Clear",
"description": "Sky is Clear",
"icon": "01n"
}
],
"main": {
"temp": 18.76,
"pressure": 1019,
"humidity": 72,
"temp_min": 17.5,
"temp_max": 20
},
"wind": {
"speed": 3,
"deg": 30
},
"clouds": {
"all": 0
},
"dt": 1407200467,
"id": 524901,
"name": "Moscow"
},
{
"coord": {
"lon": 30.52,
"lat": 50.43
},
"sys": {
"type": 1,
"id": 7348,
"message": 0.0346,
"country": "UA",
"sunrise": 1407205931,
"sunset": 1407260136
},
"weather": [
{
"id": 800,
"main": "Clear",
"description": "Sky is Clear",
"icon": "01n"
}
],
"main": {
"temp": 19.55,
"pressure": 1013,
"humidity": 88,
"temp_min": 17,
"temp_max": 21
},
"wind": {
"speed": 4,
"deg": 10
},
"clouds": {
"all": 0
},
"dt": 1407200377,
"id": 703448,
"name": "Kiev"
},
{
"coord": {
"lon": -0.13,
"lat": 51.51
},
"sys": {
"type": 1,
"id": 5091,
"message": 0.1124,
"country": "GB",
"sunrise": 1407213071,
"sunset": 1407267704
},
"weather": [
{
"id": 800,
"main": "Clear",
"description": "Sky is Clear",
"icon": "01n"
}
],
"main": {
"temp": 14.51,
"pressure": 1018,
"humidity": 72,
"temp_min": 13,
"temp_max": 17
},
"wind": {
"speed": 4.1,
"deg": 240
},
"clouds": {
"all": 0
},
"dt": 1407200474,
"id": 2643743,
"name": "London"
}
]
}
Please suggest. Awaiting your responses.
请建议。等待您的回复。
Cheers, AW
干杯，AW
回答by Haojie
Update answer after reviewing your complete code:
查看完整代码后更新答案：
There should be no curly brace when calling getProperty method of JSONModel.
var aData = jsonModel.getProperty("/list");The binding path of your Table columns are wrong. Add syspath
var weatherTable = new sap.ui.table.Table({ title : "Current Weather Details", visibleRowCount : 4 }); weatherTable.addColumn(new sap.ui.table.Column({ label : new sap.ui.commons.Label({text : "Name"}), template : new sap.ui.commons.TextView().bindText("name") })); weatherTable.addColumn(new sap.ui.table.Column({ label : new sap.ui.commons.Label({text : "Country"}), template : new sap.ui.commons.TextView().bindText("sys/country") })); weatherTable.addColumn(new sap.ui.table.Column({ label : new sap.ui.commons.Label({text : "City"}), template : new sap.ui.commons.TextView().bindText("sys/sunrise") })); weatherTable.addColumn(new sap.ui.table.Column({ label : new sap.ui.commons.Label({text : "Weather"}), template : new sap.ui.commons.TextView().bindText("sys/sunset") })); weatherTable.addColumn(new sap.ui.table.Column({ label : new sap.ui.commons.Label({text : "Description"}), template : new sap.ui.commons.TextView().bindText("weather/0/description") }));
调用 JSONModel 的 getProperty 方法时不应有大括号。
var aData = jsonModel.getProperty("/list");您的表列的绑定路径是错误的。添加系统路径
var weatherTable = new sap.ui.table.Table({ title : "Current Weather Details", visibleRowCount : 4 }); weatherTable.addColumn(new sap.ui.table.Column({ label : new sap.ui.commons.Label({text : "Name"}), template : new sap.ui.commons.TextView().bindText("name") })); weatherTable.addColumn(new sap.ui.table.Column({ label : new sap.ui.commons.Label({text : "Country"}), template : new sap.ui.commons.TextView().bindText("sys/country") })); weatherTable.addColumn(new sap.ui.table.Column({ label : new sap.ui.commons.Label({text : "City"}), template : new sap.ui.commons.TextView().bindText("sys/sunrise") })); weatherTable.addColumn(new sap.ui.table.Column({ label : new sap.ui.commons.Label({text : "Weather"}), template : new sap.ui.commons.TextView().bindText("sys/sunset") })); weatherTable.addColumn(new sap.ui.table.Column({ label : new sap.ui.commons.Label({text : "Description"}), template : new sap.ui.commons.TextView().bindText("weather/0/description") }));
回答by Saddamhussain
In your code as you mentioned that aDatais getting null. I think this is because of var aData = jsonModel.getProperty("{/list}");here what is jsonModelis the question. Are trying to get the model which you set somewhere
在您提到的代码中，aData正在获取null. 我认为这是因为var aData = jsonModel.getProperty("{/list}");这里有什么jsonModel问题。正在尝试获取您在某处设置的模型
Example:
例子：
sap.ui.getCore().setModel('jsonModel' , jsonData); // Setting the model in core with name jsonModel
and get this model in a variable.
并在变量中获取此模型。
var jsonModel = sap.ui.getCore().getModel('jsonModel');
var aData = jsonModel.getProperty('/list'); //please check the path
