json - 在 SAPUI5 中显示嵌套的 JSON 数据(sap.m 表)

Question

我目前使用 sap.m，我在将 nested json 数据绑定(bind)到 sap.m 表 时遇到问题。

这是我的 json 文件的内容:

{
 "courses": [

  {
   "req_id": "1",
   "name" : "ABAP OO Basics",
   "start" : "20-08-2014",
   "end" : "22-08-2014",
   "starttime": "10:00:00",
   "endtime": "16:00:00",
   "status": "Booked",
   "room": "Room CDE",
   "adress" : "Adress No.1",
   "street": "Street No.1",
   "zip_code": "74892142578485",
   "city": "City No.1",
   "country": "Country No.1",
   "phone": "0595726764675435497436497",
   "fax":"12",
   "cap_min": "10",
   "cap_opt": "20",
   "cap_max": "30",
   "img": "./res/1.jpg",
   "content": "Test",  
   "participant":  [{   "firstname": "Maik",
                        "lastname": "Maier",
                        "job": "installer",
                        "company": "muster" 
                    },
                    {   "firstname": "Marco",
                        "lastname": "Schmidt",
                        "job": "installer",
                        "company": "schmitt" 
                    },
                    {   "firstname": "Hans",
                        "lastname": "Mueller",
                        "job": "installer",
                        "company": "muster" 
                    },
                    {   "firstname": "Matthias",
                        "lastname": "Gottlieb",
                        "job": "installer",
                        "company": "schmitt" 
                    }]

  }
 ]
}

这是创建我的表并绑定(bind)数据的代码:

var oTable = new sap.m.Table("idRandomDataTable", {
            headerToolbar : new sap.m.Toolbar({
                content : [ new sap.m.Label({
                    text : "Participant List"
                }), new sap.m.ToolbarSpacer({}), new sap.m.Button("idPersonalizationButton", {
                    icon : "sap-icon://person-placeholder"
                }) ]
            }),
            columns : [ 
                new sap.m.Column({
                width : "2em",
                header : new sap.m.Label({
                    text : "Firstname"
                })
                }), 
                new sap.m.Column({
                width : "2em",
                header : new sap.m.Label({
                    text : "Lastname"
                })
                }), 
                new sap.m.Column({
                width : "2em",
                header : new sap.m.Label({
                    text : "Job"
                })
                }), 
                new sap.m.Column({
                width : "2em",
                header : new sap.m.Label({
                    text : "Company"
                })
                })
                ]
        });


        var oModel1 = new sap.ui.model.json.JSONModel();

        var model = sap.ui.getCore().getModel();
        var aData = model.getProperty("/courses");

        oModel1.setData({

            modelData : aData

        });

        oTable.setModel(oModel1);

        oTable.bindItems("/modelData", new sap.m.ColumnListItem({
            cells : [ new sap.m.Text({

                text : {
                    path: "participant.'firstname'",
                }
            }), new sap.m.Text({
                text : "{participant/lastname}"
            }), new sap.m.Text({
                text : "{participant}.{job}",
            }), new sap.m.Text({
                text : "{street}",
            }),]
        }));

我想将属性“参与者”的内容 - 这是“类(class)”的子属性绑定(bind)到 sap m 表，但我无法让它工作(我已经尝试了很多东西并搜索了很长时间但我找不到解决方案，在这种情况下我不知道如何访问 json)。

这是我在浏览器中看到的(您可以看到显示了 property street 但对于参与者我无法获取数据):

Firstname    Lastname    Job              Company
                      [object Object],  Street No.1
                      [object Object],
                      [object Object],
                      [object Object].

如果有人对我的问题有提示，那将是一个很大的帮助。

非常感谢，

问候，

安德烈亚斯

Answer 1

首先，您没有发布所有代码。因此，我做出了一些在您发布的内容中有意义的假设:

您将 JSON 分配给核心上的默认(未命名)模型:

sap.ui.getCore().setModel(new sap.ui.model.json.JSONModel({
  "courses": [
    {
      "req_id": "1",
      ...
});

如果您已完成此操作，那么您的这段代码将起作用:

var model = sap.ui.getCore().getModel();
  var aData = model.getProperty("/courses");
  oModel1.setData({
    modelData : aData
  });

现在我们进入问题的关键。您希望将表格行绑定(bind)到您在 JSON 中显示的类(class)的参与者(第一个也是唯一一个类(class)实例)。您需要知道，绑定(bind)一个聚合(例如表的项)应该与数组相关，而不是(您所做的)与对象相关。因此，如果您将它绑定(bind)到指向一个数组的参与者属性......并且还获得正确的绑定(bind)语法......你很好:

    oTable.bindItems("/modelData/0/participant", new sap.m.ColumnListItem({
        cells : [ new sap.m.Text({

            text : {
                path: "firstname",
            }
        }), new sap.m.Text({
            text : "{lastname}"
        }), new sap.m.Text({
            text : "{job}",
        }), new sap.m.Text({
            text : "{company}",
        }),]
    }));