Binding nested JSON data in SAPUI5 XML view - json

Question

I am trying to bind data from a nested JSON file in my SAPUI5 application. The view is in the XML format.
Here is the snippet from my JSON file:
{
"Departments": [
{
"ID": "1",
"Name": "Транспортный цех 1",
"Count": 35,
"Address": "Корпус 1, Этаж 7",
"Logo": "image/manager1.jpg",
"Employees": [
{
"ID": "1000001234",
"LastName": "Базенков",
"FirstName": "Андрей",
"MiddleName": "Анатольевич"
},
{
"ID": "1000001234",
"LastName": "Базенков",
"FirstName": "Андрей",
"MiddleName": "Анатольевич"
}
]
},
{
"ID": "2",
"Name": "Транспортный цех 2",
"Count": 35,
"Address": "Корпус 1, Этаж 7",
"Logo": "image/manager1.jpg",
"Employees": [
{
"ID": "1000001234",
"LastName": "Базенков",
"FirstName": "Андрей",
"MiddleName": "Анатольевич"
},
{
"ID": "1000001234",
"LastName": "Базенков",
"FirstName": "Андрей",
"MiddleName": "Анатольевич"
}
]
}
]
}
I am loading the JSON file in my controller and then binding the data "Address" and "Name" in my XML view as follows:
<List id="list1" items="{path:'/Departments'}">
<items>
<ObjectListItem icon="{Logo}" type="Active" press="onListItemPress" number="{Count}" title="{Name}">
<attributes>
<ObjectAttribute text="{Address}" />
</attributes>
</ObjectListItem>
</items>
</List>
However when I tried binding the nested data "FirstName" or "LastName" like this I am not able to bind it.
text="{Employees/LastName}"

Answer 1

Employees is an array.
You can pick one entry and use {Employees/0/LastName} if you like.
You can also use a formatter function to merge the employees to a string:
View:
<ObjectAttribute text="{path: 'Employees', formatter: '.formatEmployees'}"/>
Controller:
formatEmployees: function(aEmployees){
return aEmployees.map(function(employee){ return employee.LastName + ", " + employee.FirstName; }).join("; ");
}
You can use a list-control like sap.m.ListBox or sap.m.Tokenizer and bind the items to the Employees array.