I am encountering an issue while trying to display JSON data in UI5. I have successfully loaded the data and can access it to show in individual fields, such as a text view. However, I am facing problems when attempting to display the data in a table.
Here is my current approach (implemented within the ajax success handler method):
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');
The complete code snippet is updated within the script tag of index.html where the jsonModel is defined and not null.
<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
});
// Define columns for the table
...
// Create a model and bind the table rows
var oModel1 = new sap.ui.model.json.JSONModel();
...
weatherTable.setModel(oModel1);
weatherTable.bindAggregation("rows","/modelData");
weatherTable.placeAt('content');
// Additional UI elements
...
}
});
</script>
When debugging, the issue seems to be with accessing the list through getProperty on the model which returns null.
Below is a sample of the JSON data returned:
{
"cnt": 3,
"list": [
{
...
},
{
...
},
{
...
}
]
}
Your suggestions are greatly appreciated. Looking forward to your responses.
Best regards, AW