Binding JSON data in UI5 table

Question

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.

Below is how I'm trying to do it(done in 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'); 

Updating the complete code within the script tag of index.html which shows what is jsonModel & it is 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             
                    });



                    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.

Below is the JSON data returned:

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

Answer 1

Update answer after reviewing your complete code:

1. There should be no curly brace when calling getProperty method of JSONModel.

   var aData = jsonModel.getProperty("/list");

2. The binding path of your Table columns are wrong. Add sys path

          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")
   }));
   

Answer 2

In your code as you mentioned that aData is getting null. I think this is because of var aData = jsonModel.getProperty("{/list}"); here what is jsonModel is the question. Are trying to get the model which you set somewhere

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