How can i bind a nested array in UI5 Detail page?

[elinaim]

I have anMaster Detail app & oData response that i need to present:

oData Response: The main dataset (dataSources->mainService)

{
  "@odata.context": "$metadata#Items",
  "value": [
    {
      "id": 1,
      "name": "user1",
      "params": [
        {
          "type": "test",
          "status": "1"
        },
        {
          "type": "test4",
          "status": "1"
        }
      ]
    },
    {
      "id": 2,
      "name": "user2",
      "params": [
        {
          "type": "test2",
          "status": "1"
        },
        {
          "type": "test3",
          "status": "3"
        }
      ]
    }
  ]
}

I need to present the "params" array in a list in the detail page.(all types)

but for some reason the {name} param is bounded, but the {params} list is not bounded

<Text text="{name}" ></Text> 
<List items="{params}"> //THIS LIST IS NOT SHOWING ANY DATA!!
  <items> 
    <StandardListItem title="{status}"/>
  </items>
</List>

How can i bound the {params} so i would get list of {params} in the detail page?

[junwu]

you are binding with odata model directly or with jsonmodel?

[elinaim]

jun.wu5, im binding with odata model directly

[junwu]

can you share the metadata?

[ThorstenHoefer]

Hi,

you should check this tutorial how to handle master detail pages

https://sapui5.hana.ondemand.com/sdk/#/entity/sap.f.tutorial.fiori2/sample/sap.f.tutorial.fiori2.13

detail controller

onInit: function () {
 this.oRouter.getRoute("detail").attachPatternMatched(this._onProductMatched, this);
},

_onProductMatched: function (oEvent) {
   this._product = oEvent.getParameter("arguments").product || this._product || "0";
   this.getView().bindElement({
    path: "/ProductCollection/" + this._product,
    model: "products"
   });
  },

master controller

onListItemPress: function (oEvent) {
   var productPath = oEvent.getSource().getBindingContext("products").getPath(),
    product = productPath.split("/").slice(-1).pop(),
    oNextUIState;
   this.getOwnerComponent().getHelper().then(function (oHelper) {
    oNextUIState = oHelper.getNextUIState(1);
    this.oRouter.navTo("detail", {
     layout: oNextUIState.layout,
     product: product
    });
   }.bind(this));
  }

[Margot]

I still have some doubts that everything is exactly as you described in your question but some pieces are missing as with the model structure you shared even the text field bound to name should be empty because the actual binding context is missing.

With such a nested model structure you described you need to define the absolute path to the corresponding data, meaning which entity of the array you need to bind to which element e.g. like this:

	<Text text="{/value/0/name}" ></Text> 
	<List items="{/value/0/params}">
	  <items> 
		<StandardListItem title="{status}"/>
	  </items>
	</List><br>

Alternatively you could also provide the binding context with the view or a corresponding container control (if available), e.g. like this:

<Page id="detail" binding="{/value/0}">
	<Text text="{name}" ></Text> 
	<List items="{params}">
	  <items> 
		<StandardListItem title="{status}"/>
	  </items>
	</List>
</Page><br>

For sure you can also set the binding context dynamically e.g. via (user) selection. In this case you need to determine in the controller of the view the selected item of your (nested) array and set it as binding context to the corresponding element e.g. like this:

doSelect: function(oEvent) {
        var oItem = oEvent.getParameter("listItem");
        //--> get the view element
	var oDetailList = this.getView().byId("detail");
	//-->navto with path info
	oDetailList.bindElement({path: oItem.getBindingContext().getPath() });
}

From the screenshot you provided I assume that in your case you have a list view (showing the outer array) and a detail view showing the data of the nested array. In this case the context binding is normally done via routing:
In the master you identify the selected entity and set the id as routing parameter to the details view. In the controller of the details view you determine the selected entity via this id and set it as context to the view. If this is your scenario I recommend to check the Master-Detail Demo App in the Demo Kit - just download the app (via the download button in the banner) and check the code.