Dommy Gichuhi Dommy Gichuhi - 20 days ago 12
JSON Question

How can I display JSON data as a feed on a table in SAPUI5 XML view

I have a SAPUI5 splitApp application where a single client's information may be collected on several different occasions and be inserted into the database. therefore a database table may look like this;
clients information

I have another table that holds a client's contact details therefore I have used both tables to create a nested JSON with the help of the solution provided here. My JSON looks like this;



{
"contacts": [{
"clientno": "100",
"firstname": "Joe",
"secondname": "John",
"note": "Knocking vehicle",
"email": "dg@gmail.com",

"feed": [{
"clientno": "100",
"amount": "8745",
"reason": "Day 1 of xx"
}, {
"clientno": "100",
"amount": "7823",
"reason": "Day 2 of xx"

}, {
"clientno": "100",
"amount": "9000",
"reason": "Day 3 of xx"
}]
}, {
"clientno": "104",
"firstname": "Gatlin",
"secondname": "Joe",
"note": "Overspeeding",
"email": "mj@mworia.com",

"feed": [{
"clientno": "104",
"amount": "4556",
"reason": "Day 1 of xx"

}, {
"clientno": "104",
"amount": "9000",
"reason": "Day 2 of xx"
}]
}]
}





The firstname, secondname and clientno appear on the master view and the rest on the detail view. In the detail view, I have a table which I want to display all the feeds for each client. I have the following code in my detail view for the table, however, only the first feed for each client is being displayed.



<Table>
<columns>
<Column>
<header>
<Label text="Amount" />
</header>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
<header>
<Label text="Reason" />
</header>
</Column>

</columns>
<ColumnListItem>
<cells>
<Text text="{feed/0/amount}" />
<Text text="{feed/0/reason}" />
</cells>
</ColumnListItem>
</Table>





Kindly, how do I display all the feeds for each client for example, the table for client 100 will have 3 rows. I only have one. What am I missing? Please help.

I have gone through several past posts and I can't get one with what am looking for. this, this , and this too plus several others

Thanks,

Dominic

Answer

You need to change the binding in your view and set the binding context depending on the selected customer.

First, change the aggregation binding. This tells the binding to use the feed array as data source. However this won't show anything as you just have declared that your object has a feed property but without a binding context UI5 does not know where to find it.

<Table id="feeds" items="{feed}">

Second: Change property binding. Here you just declare the feed properties you want to display. UI5 automatically knows that they can be found in the feed array.

<Text text="{amount}" />
<Text text="{reason}" />

Third: Set the binding context to the corresponding customer. You can think of the binding context as a pointer to the data. In your case the binding context would be something like: contacts/0 (points to the first customer). The binding context has a leading slash, which is very important. UI5 will look now for feeds in the context of the first entry in your contacts.

var table = this.byId("feeds"); 
table.bindElement("/contacts/0");

Further details about binding syntax with a JSON models can be found here.

Comments