GroupBy with multiple attributes in angular filter

Question

I have the json data like below [{ "id": 1, "address": "MG Road", "country": INDIA, "state": AP, "city": VIJ }, { "id": 2, "address": "Miyapur", "country": INDIA, "state": TS, "city": HYD }, { "id": 3, "address": "Autonagar", "country": INDIA, "state": AP, "city": VIJ }, { "id": 4, "address": "Kukatpalli", "country": INDIA, "state": TS, "city": HYD }, { "id": 5, "address": "Koti", "country": INDIA, "state": TS, "city": HYD } ]

I want to display like below format

IND,TS,HYD
Miyapur,Koti,Kukatpalli
IND,AP,VIJ,
MG Road, Autonagar

For that im using groupBy filter like below but i was unable to group those values

here is my code

     <div class="location-container">
            <label ng-repeat="(key,value) in locationmodel | groupBy: '[country,state,city]'">{{key}}
            </label>
            <span ng-repeat="location in value">{{location.address}}</span>
      </div>

But with above code i was unable to get what i'm expected. please help me in resolving this.

Thanks in advance

Max Leizerovich · Accepted Answer · 2016-09-15 07:45:19Z

Here is a solution: https://jsfiddle.net/mqt0xjjc/

HTML:

<div ng-app="myApp">
<div  ng-controller="Main">
    <div ng-repeat=" (groupedBy, groupedItems) in locationmodelGrouped">
        <b>{{groupedBy}}</b>
        <li ng-repeat="item in groupedItems">{{item.address}}</li>        
    </div>
</div>
</div>

JS:

angular.module('myApp', []).controller( 'Main', 
function($scope) {
    function groupBy(items, groupByAttrs) {
        const retVal = items.reduce(
          function (sum, item) {
            const key = groupByAttrs.map( attr => item[attr]).join(',');
            sum[key] = sum[key] || [];
            sum[key].push(item);
            return sum;
          },
          {}
         );
      return retVal;
    };

    $scope.$watch('locationmodel',
        function () {
        $scope.locationmodelGrouped = groupBy($scope.locationmodel, ['country','state','city'])
      }
   )

$scope.locationmodel = [{
    "id": 1,
    "address": "MG Road",
    "country": 'INDIA',
    "state": 'AP',
    "city": 'VIJ'
},
{
    "id": 2,
    "address": "Miyapur",
    "country": 'INDIA',
    "state": 'TS',
    "city": 'HYD'
},
{
    "id": 3,
    "address": "Autonagar",
    "country": 'INDIA',
    "state": 'AP',
    "city": 'VIJ'
},
{
    "id": 4,
    "address": "Kukatpalli",
    "country": 'INDIA',
    "state": 'TS',
    "city": 'HYD'
},
{
    "id": 5,
    "address": "Koti",
    "country": 'INDIA',
    "state": 'TS',
    "city": 'HYD'
}
];

});

MAREESKANNNAN RAJENDRAN · Accepted Answer · 2016-09-15 07:22:15Z

If you like you may try this one to get your output

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
   var myApp = angular.module('myApp', []);
   myApp.controller('myAppCtrl', function ($scope) {
    var locationmodel = [{
      "id" : 1,
      "address" : "MG Road",
      "country" : "INDIA",
      "state" : "AP",
      "city" : "VIJ"
     }, {
      "id" : 2,
      "address" : "Miyapur",
      "country" : "INDIA",
      "state" : "TS",
      "city" : "HYD"
     }, {
      "id" : 3,
      "address" : "Autonagar",
      "country" : "INDIA",
      "state" : "AP",
      "city" : "VIJ"
     }, {
      "id" : 4,
      "address" : "Kukatpalli",
      "country" : "INDIA",
      "state" : "TS",
      "city" : "HYD"
     }, {
      "id" : 5,
      "address" : "Koti",
      "country" : "INDIA",
      "state" : "TS",
      "city" : "HYD"
     }
    ];
    var resultObj = {};
    for (var i = 0; i < locationmodel.length; i++) {
     if (resultObj[locationmodel[i].country + ',' + locationmodel[i].state + ',' + locationmodel[i].city])
      resultObj[locationmodel[i].country + ',' + locationmodel[i].state + ',' + locationmodel[i].city].address.push(locationmodel[i].address);
     else
      resultObj[locationmodel[i].country + ',' + locationmodel[i].state + ',' + locationmodel[i].city] = {
       address : [locationmodel[i].address]
      };
    }

 $scope.result=resultObj;
   });
</script>
<body ng-app="myApp" ng-controller='myAppCtrl'>
 <div class="location-container" ng-repeat="(key,value) in result">
  <label >{{key}}</label><br>
  <span>{{value.address.join()}}</span>
 </div>
</body>

Collectives™ on Stack Overflow

GroupBy with multiple attributes in angular filter

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related