Binding nested JSON data in SAPUI5 XML view

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

schnoedel schnoedel · Accepted Answer · 2016-03-31T09:34:09

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.

Binding nested JSON data in SAPUI5 XML view

1 Answers