JSON Model with 2 tables and same fieldnames - binding not working

[sven_schuberth2]

Hi there,

I have a json-model with 2 tables (ORDERS UORDERS) and same fieldnames. I bind this model in Component.js. Binding in View 1 works correct, binding in view2 does not show the values...

Furthermore I cant get the clicked index from StandardListItem.

{
 "ORDERS":[
  {"VBELN":"0005003212",
   "TEXT":"SD Einführung",
   "HOURS":3.7689999999999998E+02,
   "HOURS_PLANNED":0},
  {"VBELN":"0005003239",
   "TEXT":"lt. A 25002257/IT-A 201821812",
   "HOURS":0,
   "HOURS_PLANNED":0}],
  "BNAME":"SAP Core",
  "OCNT":2,
  "UORDERS":[
   {"VBELN":"0005003239",
    "TEXT":"lt. A 25002257/IT-A 201821812",
    "HOURS":0,
    "HOURS_PLANNED":0}],
  "UCNT":1
}

var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData("/zrest/mit_cats/");
this.setModel(oModel,"common");

View1

<List id="lstOrders"
        headerText="Kundenaufträge {common>/BNAME}"
        items = "{common>/ORDERS}" 
	mode="SingleNavigateRight">
	<items draggable = "false">
		<StandardListItem
			title = "{common>VBELN}"
			description = "{common>TEXT}"
			info = "erfasste Stunden: {common>HOURS}"
			type="Navigation"
			press="onItemClick"
			/>
	</items>
</List>

View2

<List 	
	headerText="nicht zugewiesene Aufträge"
	binding="{common>/UORDERS}" >
	<items>
		<StandardListItem
			title="{common>VBELN}"
			description="{common>TEXT}"
			type="Navigation" 
			press="onItemClick"/>
	</items>
</List>

One line is visible in List, but why are the values in view 2 not displayed?

I try to get the clicked item by

onItemClick: function(oEvent){
		var oBindingContext = oEvent.getSource().getBindingContext("common");
		var sPath = oBindingContext.sPath;
		var start = sPath.lastIndexOf('/')+1;
		var idx = sPath.substring(start, sPath.length);
		var data = sap.ui.getCore().getModel("common").getData();
		var uData = data.UORDERS[idx];

		this.loadOrder(uData.VBELN);
		this.getRouter().navTo("orderDetails");
	}

I dont know why sPath does not contain the index of the clicked item. On other bindings it its working...

[boghyon · Accepted solution]

In the second List, replace

binding="{common>/UORDERS}"

with:

items="{common>/UORDERS}"

The `binding` is for binding a single element / entity / object. Since `UORDERS` is an array, the appropriate binding should be aggregation binding instead of element.

This will also resolve the issue with the clicked item. Generally, you can then get the clicked item and the bound property like this:

onItemClick: function(oEvent) {
  var clickedItem = oEvent.getSource();
  var vbeln = clickedItem.getBindingContext("common").getProperty("VBELN"); // returns: "0005003239"
  // ...
}

[sven_schuberth2 · Accepted solution]

Thank you very much!

And your onItemCLick ist so much better 🙂