How to filter data and show it in master details view - sapui5

Question

My Data
link https://api.myjson.com/bins/rwqy
Model
var oModel = new sap.ui.model.json.JSONModel("https://api.myjson.com/bins/rwqy");
sap.ui.getCore().setModel(oModel,'data');
I want to create a SplitApp(Master-Details page). I have created the Master page as a List of User Name from the User dataset. The list should contain the firstname.
var oList = new sap.m.List({
id:"listId",
mode: sap.m.ListMode.SingleSelect,
select: function(){
oController.itemSelected();
}
});
var oItemTemplate = new sap.m.StandardListItem({
id: "sList",title:"{data>firstname}"});
oList.bindAggregation("items","data>/user",oItemTemplate );
return new sap.m.Page({
id:"master",
title: "Claims",
content: [oList]
});
Now in details page I want to show the expenses made by that user(when i select a specific user from master view) in a table.
Now my question is how to filter data and use it for the Details view. Example:
If I select User "X" from Master view list, I should get id 1 from the "user" and Expenseno 1,4 and 7 (as they are associated with uid 1) from "expense", finally i will show the expenses of uid 1 in the details view.
Code I am trying
itemSelected: function(){
var app = sap.ui.getCore().byId("appid");//when a item will b selected first we will get instance of our app
var list = sap.ui.getCore().byId("listId");//then will get instance of the list
var sitem = list.getSelectedItem();
var spath = sitem.oBindingContexts.data.sPath;
var oitem = sap.ui.getCore().getModel('data').getProperty(spath);
console.log(oitem); //oitem has Object { id="", firstname="", lastname=""} values of the selected user.
//***how to get only the id from "oitem" and filter with expense table***//
//var Model = new sap.ui.model.json.JSONModel(oitem); // will use it for details
//sap.ui.getCore().setModel(Model,'item');// view(oitem should contain the filtered data)
app.toDetail("detailsid","show");
},
Please Help, Thank you.

Answer 1

I would suppose you reorganize your data source to something like.
[
{
"id": "1",
"firstname": "x",
"lastname": "k",
"expense": [
{
"expenseno": "1",
"uid": "1",
"item": "c",
"amount": "1500"
},
{
"expenseno": "4",
"uid": "1",
"item": "y",
"amount": "1000"
},
{
"expenseno": "7",
"uid": "1",
"item": "q",
"amount": "900"
}
]
},
{
"id": "2",
"firstname": "y",
"lastname": "kalita",
"expense": [
{
"expenseno": "2",
"uid": "2",
"item": "t",
"amount": "1150"
},
{
"expenseno": "5",
"uid": "2",
"item": "t",
"amount": "3500"
}
]
},
{
"id": "3",
"firstname": "z",
"lastname": "kalita",
"expense": [
{
"expenseno": "6",
"uid": "3",
"item": "s",
"amount": "3500"
},
{
"expenseno": "3",
"uid": "3",
"item": "p",
"amount": "500"
}
]
}
]
You can do this from your initial Data set by something like this
myData.user.forEach(function(d,i){
var exp = myData.expense.filter(function(d1){
if(d1.uid === d.id)return true;
});
console.log(exp);
});
After this it is just relative binding from parent. /Expense will give all the expenses of parent.
Hope this helps.