How to filter and group products in angularjs in single loop

Question

I have JSON array like this:

[
    {
        "Variants": [],
        "SubCategoryID": "53",
        "ProductImagePath": "/images/quaker/1247.png",
        "SubCategoryName": "Oats",
        "BrandName": "Quaker",
        "ProductID": "1247",
        "BrandID": "229",
        "ProductName": "Oats - Home Style Masala"
    },
    {
        "Variants": [],
        "SubCategoryID": "53",
        "ProductImagePath": "/images/quaker/1247.png",
        "SubCategoryName": "Oats",
        "BrandName": "Suffola",
        "ProductID": "1047",
        "BrandID": "129",
        "ProductName": "Oats - Home Style Masala"
    },
    {
        "Variants": [],
        "SubCategoryID": "53",
        "ProductImagePath": "/images/quaker/1246.png",
        "SubCategoryName": "Oats",
        "BrandName": "Quaker",
        "ProductID": "1246",
        "BrandID": "229",
        "ProductName": "Oats - Kesar Flavour with Kismis"
    },

    {
        "Variants": [],
        "SubCategoryID": "53",
        "ProductImagePath": "/images/quaker/1246.png",
        "SubCategoryName": "Oats",
        "BrandName": "Suffola",
        "ProductID": "1046",
        "BrandID": "129",
        "ProductName": "Oats - Kesar Flavour with Kismis"
    },

    {
        "Variants": [],
        "SubCategoryID": "53",
        "ProductImagePath": "/images/quaker/1245.png",
        "SubCategoryName": "Oats",
        "BrandName": "Quaker",
        "ProductID": "1245",
        "BrandID": "229",
        "ProductName": "Oats - Multigrain Advantage"
    },

    {
        "Variants": [],
        "SubCategoryID": "53",
        "ProductImagePath": "/images/quaker/1245.png",
        "SubCategoryName": "Oats",
        "BrandName": "Suffola",
        "ProductID": "1045",
        "BrandID": "129",
        "ProductName": "Oats - Multigrain Advantage"
    },
    {
        "Variants": [],
        "SubCategoryID": "38",
        "ProductImagePath": "/images/dry_fruits/walnut.jpg",
        "SubCategoryName": "Dry Fruits",
        "BrandName": "Quality Plus",
        "ProductID": "24",
        "BrandID": "58",
        "ProductName": "Chestnut (Akhrot Gota)"
    },
    {
        "Variants": [],
        "SubCategoryID": "38",
        "ProductImagePath": "/images/dry_fruits/walnut.jpg",
        "SubCategoryName": "Dry Fruits",
        "BrandName": "Quality Plus",
        "ProductID": "24",
        "BrandID": "58",
        "ProductName": "Chestnut -2 (Akhrot Gota)"
    },
    {
        "Variants": [],
        "SubCategoryID": "38",
        "ProductImagePath": "/images/dry_fruits/walnut.jpg",
        "SubCategoryName": "Dry Fruits",
        "BrandName": "Quality Plus",
        "ProductID": "24",
        "BrandID": "58",
        "ProductName": "Chestnut -3 (Akhrot Gota)"
    }
]

We can display the products of a particular SubCategory using this:

<div class='box' ng-repeat="product in pc.ProductService.Products | filter:FilterExpr:true | orderBy:'ProductName'">
    <!-- Code to display the products -->
</div>

Where I am setting FilterExpr in JavaScript on selecting a subcategory:

$scope.FilterExpr = {'SubCategoryID': $stateParams.SCID.toString()};

For example - on selecting SubCategoryID = 53, product will be displayed like this:

    "BrandName": "Quaker",
    "ProductName": "Oats - Home Style Masala"

    "BrandName": "Suffola",
    "ProductName": "Oats - Home Style Masala"

    "BrandName": "Quaker",
    "ProductName": "Oats - Kesar Flavour with Kismis"

    "BrandName": "Suffola",
    "ProductName": "Oats - Kesar Flavour with Kismis"

    "BrandName": "Quaker",
    "ProductName": "Oats - Multigrain Advantage"

    "BrandName": "Suffola",
    "ProductName": "Oats - Multigrain Advantage"

But i want to group them by Brand Name also, means all products of a particular brands in selected subcategory must be display together:

    "BrandName": "Quaker",
    "ProductName": "Oats - Home Style Masala"

    "BrandName": "Quaker",
    "ProductName": "Oats - Kesar Flavour with Kismis"

    "BrandName": "Quaker",
    "ProductName": "Oats - Multigrain Advantage"

    "BrandName": "Suffola",
    "ProductName": "Oats - Home Style Masala"

    "BrandName": "Suffola",
    "ProductName": "Oats - Kesar Flavour with Kismis"

    "BrandName": "Suffola",
    "ProductName": "Oats - Multigrain Advantage"

How to do that??

Answer 1

Try this with group by

<div class='box' ng-repeat="product in pc.ProductService.Products | filter:FilterExpr:true | groupBy:'BrandName' | orderBy:'ProductName'">
    <!-- Code to display the products -->
</div>


app.filter('groupBy', function() {
    return _.memoize(function(items, field) {
            return _.groupBy(items, field);
        }
    );
});

http://jsfiddle.net/TD7t3/