AngularJS Example:

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app="app">
     <h2>Todo</h2>

    <div ng-controller="TodoCtrl">
        <div ng-repeat="i in items | orderBy: 'product_id' |groupBy:'product_id':'quantity' track by i.product_id">product_id {{i.product_id}}| quantity {{i.quantity}}|</div>
    </div>
</div>

CSS

.done-true {
    text-decoration: line-through;
    color: grey;
}

JavaScript

angular.module('app', [])
    .controller('TodoCtrl', function ($scope) {
    $scope.items = [{
        product_id: 1,
        quantity: 2
    }, {
        product_id: 1,
        quantity: 3
    }, {
        product_id: 2,
        quantity: 2
    }, {
        product_id: 3,
        quantity: 4
    }, {
        product_id: 2,
        quantity: 8
    }];
})
    .filter('groupBy', function () {
    return function (values, property1, property2) {
        var groupByArray = [];
        console.log("Initialize");
        var copyOfValues = angular.copy(values),
            retValue = [];
        if(values)
        angular.forEach(copyOfValues, function (value, index) {
            var lengthOfGroupBy = groupByArray.length;
            if (lengthOfGroupBy == 0 || groupByArray[lengthOfGroupBy - 1][property1] != value[property1]) {
                this.push(value);
            } else {
                console.log(value)
                this[lengthOfGroupBy - 1][property2] += value[property2]
            }
        }, groupByArray);
        return groupByArray;
    }
});