How to sort JSON data in ng-repeat?

You might need to define a very good sorter function, or sort your products before they are interpreted by ng-repeat. I've created sorter function using underscore.js (or lodash).

You can checkout the demo (or the updated demo). Products are first sorted by category and then sorted by price in every category.

<!-- in html --><button ng-click="sortFn=sortByPrice">Sort By Price</button><button ng-click="sortFn=doNotSort">Do not Sort</button>...<div ng-repeat="val in sortFn(vals.products)">  ...

// in js$scope.sortByPrice = function(products) {  return _.sortBy(products, function(product) {    return product.length > 0 ? product[0].priceList : 0;  });};$scope.doNotSort = function(products) {  return products;};$scope.sortFn = $scope.doNotSort; // do not sort by default

BTW: You are directly calling val[0], which is very dangerous, if the product does not contain any elements, your code will break. My code won't ;-)

Update 1

The author asks me for a more pure Angular way solution.

Here is my answer: I think my solution is exactly in Angular way. Usually you can implement a filter (similar to orderBy) which wraps my sortByPrice. Why I don't do that, because you have ng-click to switch your order filter. I'd rather put control logic into a controller, not as pieces into view. This will be harder to maintain, when your project keeps growing.

Update 2

Okay, to make the +50 worthy, here is the filter version you want, (typed with my brain compiler) Please check in fiddle

You need to organize the products in other estructure. For example:

 $.each($scope._JSON[0].categories , function( i , e) {        $.each(e.itemTypeResults, function(sub_i,sub_e) {         $.each(sub_e.products, function(itemTypeResults_i,product) {            console.log(product);            var aProduct = new Object();          aProduct.priceList = product[0].priceList;          aProduct.name = e.name;            $scope.products.push(aProduct);          });      } )    });

The code is not very friendly but what i do is putt all the products in one array so they can be ordered by the price. You have the products inside categories so that's why angular is ordering by the price in each category.

Fiddle:http://jsfiddle.net/7rL8fof6/1/

Hope it helps.

Your fiddle updated: http://jsfiddle.net/k5fkocby/2/

Basically:1. Digested the complex json object into a flat list of objects:

var productsToShow = [];for (var i=0; i < json[0].categories.length; i++){    var category = json[0].categories[i];    for (var j=0; j<category.itemTypeResults.length;j++){    var item = category.itemTypeResults[j];           var products = item.products;        for (var productIndex in products) {        var productItems = products[productIndex];      for (var k=0; k<productItems.length;k++){            var productItem = productItems[k];                 // Additions:          productItem.categoryName = category.name;                           productItem.partTerminologyName = item.partTerminologyName;          productItem.position = item.position;                           productsToShow.push(productItem);                  }    }        } }

2. Show category title only when needed by:

   ng-repeat="product in (sortedProducts = (productsToShow | orderBy:predicate))"

and

ng-show="sortedProducts[$index - 1].partTerminologyName != product.partTerminologyName"