Sort multidimensional JSON in angular

Question

I get JSON from a database and its structure is like this:

  "data": [
    {
      "category": "1",
      "description": "hello"
      }
   ]

description and category are all dynamic, so I can have 5 objects with category:1 and 2 with category:3 etc. Or I could have 3 objects with category:20 and 25 objects with category:8.

I want to create HTML elements like this:

Category 1
....
....
....

Category 3
....
....

I can create a string like this:

$scope.hello = [];
angular.forEach(data.data, function(value, key) {
  $scope.hello.push(value.category+" "+value.description)
}

so that it will output:

Category 1 hello
Category 1 hi
Category 1 bye
Category 3 sup
Category 3 yo

But how will I turn this to:

Category 1
hello 
hi
bye

Category 3
sup
yo

You should try the grouping of record on server side, I mean from where you are getting the JSON array. And here on the client side just loop and display. That's the best practise and also optimised way — Coder John, Mar 24 '16 at 10:46

score 1 · Answer 1 · answered Mar 24 '16 at 10:46

javascript provides a sort function. In this function I am sorting an array of site objects by two properties; name and region.

    function sort(col, direction) {
        switch (col) {
            case "region":
            {
                sites.sort(function(s1, s2) {
                    var r = 0;
                    if (s1.region < s2.region)
                        r = -1;
                    else if (s1.region > s2.region)
                        r = 1;
                    else {
                        if (s1.name < s2.name)
                            r = -1;
                        else if (s1.name > s2.name)
                            r = 1;
                    }
                    return r;
                });
                break;
            }
            default:
            {
                sites.sort(function(s1, s2) {
                    var r = 0;
                    if (s1.name < s2.name)
                        r = -1;
                    else if (s1.name > s2.name)
                        r = 1;
                    else {
                        if (s1.region < s2.region)
                            r = -1;
                        else if (s1.region > s2.region)
                            r = 1;
                    }
                    return r;
                });
            }
        }
        if (direction === "desc") {
            this.sites.reverse();
        }
    }

score 1 · Accepted Answer · edited May 23 '17 at 10:34

use groupBy of angular.filter module for more info see this answer . How can I group data with an Angular filter?

var app = angular.module("app",['angular.filter'])
app.controller('ctrl',['$scope', function($scope){
        $scope.data = [
                {
                  "category": "1",
                  "description": "hello"
                },
          {
                  "category": "1",
                  "description": "hi"
                },
          {
                  "category": "3",
                  "description": "hai"
                },
          {
                  "category": "1",
                  "description": "hello"
                },
          {
                  "category": "3",
                  "description": "hello"
                },
          {
                  "category": "1",
                  "description": "hai"
                }
   ]
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-filter/0.4.7/angular-filter.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div class="item item-checkbox">
   <ul ng-repeat="(key, value) in data | groupBy: 'category'">
      category: {{ key }}
      <li ng-repeat="d in value |orderBy:'description'">
          {{ d.description }} 
      </li>
   </ul>      
</div>

Wait, do I have to get the filter module like so `` and then pass this in my app like `var app = angular.module("app",['angular.filter'])` ? — slevin, Mar 24 '16 at 11:04
yes. you must inject angular-filter.js after angular lib. please if this answer help you accept it. thanks — Hadi J, Mar 24 '16 at 11:06
Sorry , I cannot install the filter for the `groupBy` to work .How did you installed it, so I can make it work? Thanks — slevin, Mar 24 '16 at 11:13

Sort multidimensional JSON in angular

2 Answers2