Display Nested JSON data in SAPUI5 (sap.m Table)

问题:

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

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

  }
 ]
}

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

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.

Thanks a lot,

Regards,

Andreas

回答1:

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:

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

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

回答2:

You are binding the wrong paths.

oTable.bindItems("/modelData", new sap.m.ColumnListItem({
        cells : [ new sap.m.Text({
            text : "{/participant/firstname}"
        }), new sap.m.Text({
            text : "{/participant/lastname}"
        }), new sap.m.Text({
            text : "{/participant/job}",
        }), new sap.m.Text({
            text : "{/participant/company}",
        }),]
    }));