Tips on organizing SAPUI5 OData prior to binding it to a control on the client side

Question

Tips on organizing SAPUI5 OData prior to binding it to a control on the client side

Suppose I have an OData list represented in JSON format:

var data = [
 {"category" : "A", "value" : 1, "group" : "x"},
 {"category" : "B", "value" : 2, "group" : "y"},
 {"category" : "C", "value" : 3, "group" : "x"},
 {"category" : "A", "value" : 4, "group" : "y"},
 {"category" : "A", "value" : 5, "group" : "x"}
];

Initially, a filter is applied to select entries with group == x;. The resulting values are:

var data = [
 {"category" : "A", "value" : 1, "group" : "x"},
 {"category" : "C", "value" : 3, "group" : "x"},
 {"category" : "A", "value" : 5, "group" : "x"}
];

The next step involves client-side grouping by category and summing up the values, leading to the following result:

var data = [
 {"category" : "A", "value" : 6, },
 {"category" : "C", "value" : 3, },
];

This grouped data can then be bound to a SAPUI5 control.

If anyone has a generic solution for this grouping issue, please share it.

An example scenario could involve:

var oDataset = new sap.viz.ui5.data.FlattenedDataset({
    dimensions : [ {axis : 1, value : "{category}", name : "Category" } ],
    measures : [ {value : "{value}", name : "Value" } ],
    data : {
        path : "/Data"
    }
});

var oGraph = new sap.viz.ui5.Donut({
    dataset : oDataset, // sap.viz.ui5.data.Dataset
});

javascript client odata sapui5

Answer 1

Answer №1

This code successfully queries the Northwind Order_Details service for multiple Products using a generic binding, then leverages map reduce to aggregate the Quantity of each order into total Quantity sold. The results are displayed in a column chart.

Check out the jsBin Example

It's worth noting that sap.viz introduces Array.prototype.map and Array.prototype.reduce functions.

var sURI = 'http://services.odata.org/Northwind/Northwind.svc/';
var oDataModel = new sap.ui.model.odata.ODataModel(sURI, true);
oDataModel.setSizeLimit(10000);
var oJSONModel = new sap.ui.model.json.JSONModel({}, 'jmodel');

// Handler for list of contexts
var handler = function(oEvent) {
    var mapCallback = function(oContext) {
        var obj = {};
        obj.ProductID = oContext.getObject().ProductID,
        obj.Quantity = oContext.getObject().Quantity
        return obj;
    };

    var reduceCallback = function(aPrev, oCurr) {
        var aNext = aPrev;
        var bFound = false;

        aNext.forEach(function(item) {
            if (item.ProductID === oCurr.ProductID) {
                bFound = true;
                item.Quantity += oCurr.Quantity;
            }
        })

        if (bFound === false) {
            aNext.push(oCurr);
        }

        return aNext;
    };
    // Release handler
    oBindings.detachChange(handler);

    var aTotals = oEvent.oSource.getContexts().map(mapCallback).reduce(reduceCallback, []);
    oJSONModel.setData({
        'Order_Totals': aTotals
    });
};

// Filtering orders by 3 products
var oFilter1 = new sap.ui.model.Filter("ProductID", sap.ui.model.FilterOperator.EQ, '1');
var oFilter2 = new sap.ui.model.Filter("ProductID", sap.ui.model.FilterOperator.EQ, '68');
var oFilter3 = new sap.ui.model.Filter("ProductID", sap.ui.model.FilterOperator.EQ, '11');
var aFilter = [oFilter1, oFilter2, oFilter3];

// Sorting by ProductID
var oSorter = new sap.ui.model.Sorter("ProductID", false, true);

// Reducing payload by selecting necessary fields
var oSelect = {
    select: 'ProductID,Quantity'
}

var oBindings = oDataModel.bindList("/Order_Details", null, oSorter, aFilter, oSelect);

// Calling OData service and managing results
oBindings.attachChange(handler);
oBindings.getContexts();

var oDataset = new sap.viz.ui5.data.FlattenedDataset({
    dimensions: [{
        axis: 1,
        name: 'ProductID',
        value: "{ProductID}"
    }],
    measures: [{
        name: 'Quantity Sold',
        value: '{Quantity}'
    }],
    data: {
        path: "/Order_Totals"
    }
});

var oColumnChart = new sap.viz.ui5.Column({
    width: "80%",
    height: "400px",
    plotArea: {
        'colorPalette': d3.scale.category20().range()
    },
    title: {
        visible: true,
        text: 'Quantity Sold by Product'
    },
    dataset: oDataset
});

oColumnChart.setModel(oJSONModel);

Answer 2

This code successfully queries the Northwind Order_Details service for multiple Products using a generic binding, then leverages map reduce to aggregate the Quantity of each order into total Quantity sold. The results are displayed in a column chart.

Check out the jsBin Example

It's worth noting that sap.viz introduces Array.prototype.map and Array.prototype.reduce functions.

var sURI = 'http://services.odata.org/Northwind/Northwind.svc/';
var oDataModel = new sap.ui.model.odata.ODataModel(sURI, true);
oDataModel.setSizeLimit(10000);
var oJSONModel = new sap.ui.model.json.JSONModel({}, 'jmodel');

// Handler for list of contexts
var handler = function(oEvent) {
    var mapCallback = function(oContext) {
        var obj = {};
        obj.ProductID = oContext.getObject().ProductID,
        obj.Quantity = oContext.getObject().Quantity
        return obj;
    };

    var reduceCallback = function(aPrev, oCurr) {
        var aNext = aPrev;
        var bFound = false;

        aNext.forEach(function(item) {
            if (item.ProductID === oCurr.ProductID) {
                bFound = true;
                item.Quantity += oCurr.Quantity;
            }
        })

        if (bFound === false) {
            aNext.push(oCurr);
        }

        return aNext;
    };
    // Release handler
    oBindings.detachChange(handler);

    var aTotals = oEvent.oSource.getContexts().map(mapCallback).reduce(reduceCallback, []);
    oJSONModel.setData({
        'Order_Totals': aTotals
    });
};

// Filtering orders by 3 products
var oFilter1 = new sap.ui.model.Filter("ProductID", sap.ui.model.FilterOperator.EQ, '1');
var oFilter2 = new sap.ui.model.Filter("ProductID", sap.ui.model.FilterOperator.EQ, '68');
var oFilter3 = new sap.ui.model.Filter("ProductID", sap.ui.model.FilterOperator.EQ, '11');
var aFilter = [oFilter1, oFilter2, oFilter3];

// Sorting by ProductID
var oSorter = new sap.ui.model.Sorter("ProductID", false, true);

// Reducing payload by selecting necessary fields
var oSelect = {
    select: 'ProductID,Quantity'
}

var oBindings = oDataModel.bindList("/Order_Details", null, oSorter, aFilter, oSelect);

// Calling OData service and managing results
oBindings.attachChange(handler);
oBindings.getContexts();

var oDataset = new sap.viz.ui5.data.FlattenedDataset({
    dimensions: [{
        axis: 1,
        name: 'ProductID',
        value: "{ProductID}"
    }],
    measures: [{
        name: 'Quantity Sold',
        value: '{Quantity}'
    }],
    data: {
        path: "/Order_Totals"
    }
});

var oColumnChart = new sap.viz.ui5.Column({
    width: "80%",
    height: "400px",
    plotArea: {
        'colorPalette': d3.scale.category20().range()
    },
    title: {
        visible: true,
        text: 'Quantity Sold by Product'
    },
    dataset: oDataset
});

oColumnChart.setModel(oJSONModel);

Answer 3

Answer №2

I've crafted a code for your final outcome, which may not be completely optimized but functions effectively.

Here is the complete code:

var data = [
 {"category" : "A", "value" : 1, "group" : "x"},
 {"category" : "B", "value" : 2, "group" : "y"},
 {"category" : "C", "value" : 3, "group" : "x"},
 {"category" : "A", "value" : 4, "group" : "y"},
 {"category" : "A", "value" : 5, "group" : "x"}
];

function groupBy( array , f )
{
  var groups = {};
  array.forEach( function( o )
  {
    if(o.group=="x")
    {
        var group = JSON.stringify( f(o) );
        groups[group] = groups[group] || [];
        groups[group].push( o );
    }

  });
  return Object.keys(groups).map( function( group )
  {
    return groups[group]; 
  })
}
var groupByGroup = groupBy(data, function(item)
{
  return [item.group];
});
var groupByCategory = groupBy(groupByGroup[0], function(item)
{
  return [item.category];
});
getData(groupByCategory);

function getData(groupByCategory)
{
  var  finalData=[];
    for(var i=0;i< groupByCategory.length;i++)
    {
    var temp=0;
        for(var j=0;j<groupByCategory[i].length;j++)
        {
            temp+=parseInt(groupByCategory[i][j].value);
        }
        finalData.push({"category":groupByCategory[i][0].category, "value":temp})
    }
    console.log(finalData);//final data is your required results
}

If you wish to compare using two parameters, such as category and group, modify the groupByGroup function as follows:

 groupByCategory = groupBy(groupByGroup[0], function(item)
  {
    return [item.category,item.group];
  })

Then, remove the condition if(o.group=="x") from the groupBy function. This issue can be resolved easily with underscore.js. For assistance, refer to this question:

Underscore.js: Sum of items in a collection

I hope this explanation proves helpful to you.

Answer 4

I've crafted a code for your final outcome, which may not be completely optimized but functions effectively.

Here is the complete code:

var data = [
 {"category" : "A", "value" : 1, "group" : "x"},
 {"category" : "B", "value" : 2, "group" : "y"},
 {"category" : "C", "value" : 3, "group" : "x"},
 {"category" : "A", "value" : 4, "group" : "y"},
 {"category" : "A", "value" : 5, "group" : "x"}
];

function groupBy( array , f )
{
  var groups = {};
  array.forEach( function( o )
  {
    if(o.group=="x")
    {
        var group = JSON.stringify( f(o) );
        groups[group] = groups[group] || [];
        groups[group].push( o );
    }

  });
  return Object.keys(groups).map( function( group )
  {
    return groups[group]; 
  })
}
var groupByGroup = groupBy(data, function(item)
{
  return [item.group];
});
var groupByCategory = groupBy(groupByGroup[0], function(item)
{
  return [item.category];
});
getData(groupByCategory);

function getData(groupByCategory)
{
  var  finalData=[];
    for(var i=0;i< groupByCategory.length;i++)
    {
    var temp=0;
        for(var j=0;j<groupByCategory[i].length;j++)
        {
            temp+=parseInt(groupByCategory[i][j].value);
        }
        finalData.push({"category":groupByCategory[i][0].category, "value":temp})
    }
    console.log(finalData);//final data is your required results
}

If you wish to compare using two parameters, such as category and group, modify the groupByGroup function as follows:

 groupByCategory = groupBy(groupByGroup[0], function(item)
  {
    return [item.category,item.group];
  })

Then, remove the condition if(o.group=="x") from the groupBy function. This issue can be resolved easily with underscore.js. For assistance, refer to this question:

Underscore.js: Sum of items in a collection

I hope this explanation proves helpful to you.

Tips on organizing SAPUI5 OData prior to binding it to a control on the client side

Answer №1

Answer №2

Similar questions

Increased wait time during initial execution

The JavaScript function is not executing the Node.js code as expected

Employing an array for transmitting parameters to a function

Utilize fetch API in React to streamline API responses by filtering out specific fields

Upon clicking, the Bootstrap dropdown button fails to open up

Sharing resources between different origins and the file:// protocol

The number of child notes can vary depending on the browser being used

Having trouble getting the onClick event to trigger in React?

Leveraging JSON data with jQuery's ajax function

Is the Flowplayer JS API malfunctioning due to Flowplayer not being properly 'loaded'?

Spin an object on a stationary axis

Learn how to properly display the state array within a React component. Even though the array is present in the state, you may encounter issues where it

Highcharts: Including plotlines in the legend

Avoiding mocking a specific module with jest forever

Utilize SWR to retrieve data that corresponds to the chosen value from the dropdown menu

What is the best way to transfer XML data format from a web browser to a server using jQuery?

Merging two arrays that have identical structures

Submitting modal form information using AJAX to PHP

Displaying individual attributes of objects through v-for loop

The onClick event is not functioning properly with React's select and option elements