SAP UI5: error in binding - sapui5

Question

Even though quite experienced in SAP HCM development, I have just started my quest to learn UI5 (using eclipse) so my apologies in advance if my question is a bit basic...
I am trying to create a binding of data (based upon the example of UI5 rockstar
DJ Adams) but for some reason, have no result.
in my controller I have entered the following code (in the onInit function) to create the data and make them available:
onInit: function() {
var cities = [ { id: "A1", name: "Kobe" },
{ id: "A2", name: "Hiroshoma" }
];
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(cities);
sap.ui.getCore().setModel(oModel);
},
in my view, I try to bind the data using the following code:
</IconTabFilter>
<IconTabFilter
binding="{/cities/0}"
text="{name}"
icon="sap-icon://group"
design="Horizontal">
</IconTabFilter>
<IconTabFilter
binding="{/cities/1}"
text="{name} ({id})"
icon="sap-icon://group"
design="Horizontal">
</IconTabFilter>
</items>
</IconTabBar>
</content>
</Page>
</core:View>
in my output,all the elements display correctly, however I don't get the values that I initialised in my model. However I don't get any errors either
My questions:
1. can you provide some assistance/guidance to see where I made an error?
2. what would be the easiest way to detect where issues are when it comes to databinding (debugger, other tips)?
Many thanks for your guidance,
Tom

Answer 1

The error is indeed in your bindings.
Although you have a variable cities, your JSON context starts with id.
You could update your JSONModel to have root element cities:
.setModel({
cities: [
{ id: "A1", name: "Kobe" },
{ id: "A2", name: "Hiroshoma" }
]
});
As for debugging, I prefer the standard Google Chrome browser tools. It allows for watches, breakpoints, and (small) live code changes.

Answer 2

Please try to use template, instead of binding individual elements you can use the template to bind the array to individual elements.
Example:
<List
items="{/ProductCollection}"
headerText="Products">
<items>
<ObjectListItem
title="{Name}"
type="Active"
press="onListItemPress"
number="{Price}"
numberUnit="{CurrencyCode}">
<firstStatus>
<ObjectStatus
text="Overweight"
state="Error" />
</firstStatus>
<secondStatus>
<ObjectStatus
text="In Stock"
state="Success" />
</secondStatus>
<attributes>
<ObjectAttribute text="{WeightMeasure} {WeightUnit}" />
<ObjectAttribute text="{Width} x {Depth} x {Height} {DimUnit}" />
</attributes>
</ObjectListItem>
</items>
[Live example: https://sapui5.hana.ondemand.com/sdk/explored.html#/sample/sap.m.sample.ObjectListItem/code]
If you want to have finer control on the data then you can set multiple model with key value pair.
Example:
sap.ui.getCore().setModel("key",oModel);
and to get the value:
sap.ui.getCore().getModel("key");

Answer 3

Your approach of creating model is not quiet right. Variable cities is not object but an array. Either you can set data to model:
onInit: function() {
var cities ={ "cities": [{ "id": "A1", "name": "Kobe" },
{ "id": "A2", "name": "Hiroshoma" }
]}
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(cities);
sap.ui.getCore().setModel(oModel);
},
or you can set property:
var cities = [ { id: "A1", name: "Kobe" },
{ id: "A2", name: "Hiroshoma" }
];
var oModel = new sap.ui.model.json.JSONModel();
oModel.setProperty("/cities", cities);
sap.ui.getCore().setModel(oModel);
and you also have to bind your xml correctly. You can follow the template of list items from SapUi5 explored or developers guide