OpenUI5 / SAPUI5: Get Data from REST and display it in List

Question

I want to get data from a REST API. This worked so far but I can't display the list with my XML view...

controller.js

onInit: function () {
    var oContactModel = new sap.ui.model.json.JSONModel();

    oContactModel.loadData(
        "http://localhost:8080/api/v1/contacts", null, true, 'GET'
    );

    sap.ui.getCore().setModel(oContactModel, "restContacts");
};

view.xml

<List id="contactList" width="auto" items="{restContacts>/}">
    <items>
        <ObjectListItem
            title="{restContacts>/name}"
            type="Navigation"
            press="onPressContact"
        />
    </items>
</List>

When I print the model from controller to console it shows me the data. But when I want to access the data in my XML view nothing happens... The data from REST looks like this:

[
    {
        "id": 1,
        "name": "Thomas123",
        "registrationToken": "laksjdhoi",
        "available": true
    }, {
        "id": 2,
        "name": "Thomas123",
        "registrationToken": "laksjdhoi",
        "available": true
    }
]

Answer 1

The slash aka / usually indicates accessing the root level of your data strucuture.

With /name the parsing engine tries to find something like jsondata.name

What you want is jsondata[n].name (where n is the index of the contact in the array).

Omit the slash and the engine looks for name in the current element and not the root element

<ObjectListItem
    title="{restContacts>name}"
    type="Navigation"
    press="onPressContact"
/>

Working example: https://jsbin.com/bitehe/edit?html,output