I have a UI5 Table created with SAP Web IDE.
I want the table to have 2 columns. The first one should show my distinct values extracted from an ODATA Service and the second one should display the count of my values.
For example:
Value / Count
100 / 1
200 / 3
010 / 25
So far I have created the table with my values from SAP. But they are not unique yet - the first column is showing every value.
Value 100
200
200
200
and so on.
How can i group all my values and display the respective count of values?
Here's my code:
Page.view.xml
<Table id="Table" items="{/ODATASet}">
<headerToolbar>
<Toolbar>
<Title level="H2" text="Data"></Title>
<ToolbarSpacer></ToolbarSpacer>
<Button icon="sap-icon://refresh" tooltip="Reinitialize Model" press="onModelRefresh"/>
</Toolbar>
</headerToolbar>
<columns>
<Column>
<Label text="Values"></Label>
</Column>
<Column>
<Label text="Count"></Label>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{INTST}"></Text>
</cells>
</ColumnListItem>
</items>
</Table>
Page.controller.js:
//Accessing the table from the fragment by it's Id
var oTable = this.byId("Table");
//column list item creation
var oTemplate = new sap.m.ColumnListItem({
cells: [new sap.m.Text({
text: "{INTST}"
})]
});
var sServiceUrl = "/sap/opu/odata/sap/ODATAService";
//Adding service to the odata model
var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, false);
//Setting model to the table
oTable.setModel(oModel);
oTable.bindAggregation("items", {
path: "/ODATASet",
template: oTemplate
});
},
Did it via lodash:
$
.ajax({
url: '/sap/opu/odata/sap/ODATAService',
jsonpCallback: 'getJSON',
contentType: "application/json",
dataType: 'json',
success: function(data, textStatus, jqXHR) {
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(data);
sap.ui.getCore().setModel(oModel);
//Create a model and bind the table rows to this model
//Get the forecastday array table from txt_forecast object
var aData = oModel.getProperty("/d/results");
var aData2 = _.countBy(_.map(aData, function(d) {
return d.DATE;
}));
var aData3 = Object.keys(aData2).sort().map(key => ({
key,
value: aData2[key]
}));
oModel.setData({
modelData: aData3
});
oTable2.setModel(oModel);
}
});