Question

我试图在UI5中显示一些JSON数据。我能够加载数据并且能够访问它以在独立字段中显示。例如，如果我试图在数据中显示数据文本视图我能够显示它。但它似乎不适用于表格。

以下是我尝试这样做的方法（在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');

更新index.html的脚本标记内的完整代码，该代码显示了什么是jsonModel＆amp;它不是空的。

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

当我提醒aData时，我得到它为null，因为模型上的getProperty没有返回任何内容。这就是问题所在。可能是我试图访问列表的方式是错误的。

以下是返回的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"
    }
  ]
}

请建议。等待你的回复。

干杯， AW

Answer 1

在审核完整代码后更新答案：

调用JSONModel的getProperty方法时，不应该有大括号。

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

表列的绑定路径错误。添加 sys 路径

       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

在您提到的代码中，aData正在获取null。我认为这是因为var aData = jsonModel.getProperty("{/list}");这里是jsonModel的问题。正在尝试获取您在某处设置的模型

示例：

sap.ui.getCore().setModel('jsonModel' , jsonData); // Setting the model in core with name jsonModel

并在变量中获取此模型。

var jsonModel = sap.ui.getCore().getModel('jsonModel'); var aData = jsonModel.getProperty('/list'); //please check the path

在UI5表中绑定JSON数据

2 个答案: