Search code examples
sapui5xmltable

UI5 - Count distinct values in a sap.m.table


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
        });
    },

Solution

  • 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);
                    }
                });