Displaying nested JSON data in SAPUI5 (sap.m table)
I am currently working with sap.m and I have a problem with nested json data binding to 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" is a subclass of "courses" in the sap m table and I cannot get it to work (I tried a lot of things and searched for a long time, but I didn't find a solution and I don't know how to access json in this case).
This is what I see in my browser (you can see the property street is displayed, but for the member, I cannot get the data):
Firstname Lastname Job Company
[object Object], Street No.1
[object Object],
[object Object],
[object Object].
It would be very helpful if anyone has a hint of my problem.
Many thanks,
Respectfully,
Andreas
source to share
First, you haven't posted all of your code. So I make a few assumptions that make sense in the context of what you've posted:
You assign JSON to a standard (unnamed) model on the core:
sap.ui.getCore().setModel(new sap.ui.model.json.JSONModel({
"courses": [
{
"req_id": "1",
...
});
If you did, 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 heart of the matter. You want to bind table rows to the participants in the course you showed in JSON (the first and only course). You should be aware that an aggregation binding such as table elements must be bound to an array, not (what you did) an object. So if you bind it to a member property that points to an array ... and also gets the binding syntax correct ... you're fine:
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}",
}),]
}));
source to share
You are linking 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}",
}),]
}));
source to share