在SAPUI5中显示嵌套的JSON数据（sap.m表） [英] Display Nested JSON data in SAPUI5 (sap.m Table)

问题描述

我目前使用的是 sap.m ，我将嵌套json 的数据绑定到 sap.m表时遇到问题。

i currently work with sap.m and i have a problem with binding data of a nested json to a sap.m table.

这是我的json文件的内容：

This is the content of my json file:

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

  }
 ]
}

这是创建我的表并绑定数据的代码： p>

This is the code that creates my table and binds the data:

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

我想绑定属性参与者的内容 - 这是课程的子属性到一个sap m表，我不能得到它的工作（我已经尝试了许多东西，搜索了很长时间，但我发现没有解决方案，我不知道如何访问json在这种情况下）。

I want to bind the content of the property "participant" - which is a subproperty of "courses" to a sap m table and i can't get it work (i have tried many things and searched a long time but i found no solution and i don't know how to access the json in this case).

这是我在浏览器中看到的（你可以看到，物业街被显示，但对于参与者我无法获取数据）：

This is what i see in my browser (you can see that the property street is displayed but for participant i can't get the data):

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

如果任何人对我的问题有提示，这将是一个很好的帮助。

It would be a great help if anyone has a hint for my issue.

非常感谢，

请问，

Andreas

推荐答案

首先，您没有发布所有代码。所以我做了几个假设，在你发布的内容中是有道理的：

First, you didn't post all of your code. So I'm making a couple of assumptions which make sense in the context of what you have posted:

你将JSON分配给默认（未命名）模型核心：

You're assigning the JSON to the default (unnamed) model on the core:

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

如果你这样做，那么这一点代码将会起作用：

If you've done this, then this bit of your code will work:

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

所以现在我们得到的关键你想将表格行绑定到您在JSON（第一个也是唯一的课程实例）中显示的课程的参与者，您需要知道绑定一个聚合，如表的项目应该与数组，而不是（你做了什么）对象，所以如果你绑定它参与者属性，它指向一个数组...并且还获得绑定语法...你很好：

So now we get to the crux of the matter. You want to bind the table rows to the participants of the course you showed in the JSON (the first and only course instance). You need to know that binding an aggregation such as the items of a table should be related to an array, rather than (what you did) to an object. So if you bind it to the participant property, which points to an array ... and also get the binding syntax right ... you're good:

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

这篇关于在SAPUI5中显示嵌套的JSON数据（sap.m表）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！