How group objects in array from ng-repeat with filter?

Question

How group objects in array from ng-repeat with filter ?

I have an array with objects, and I would like group by this objects by their countries.

Sample : I would like to have this result :

Free : Australia, India, United States  
Pay : Australia
Not Pay : Australia, India

from :

$scope.lists = [{
    "id": 1
    "field": [
        {
            country: "Australia",
            type: "Free"
        },
        {
            country: "Australia",
            type: "Pay"
        },
        {
            country: "Australia",
            type: "Not Pay"
        },
        {
            country: "India",
            type: "Free"
        },
        {
            country: "India",
            type: "Not Pay"
        },
        {
            country: "United States",
            type: "free"
        },
    },
    {
    "id": 2
    "field": [
        {
            country: "Australia",
            type: "Pay"
        },
        {
            country: "India",
            type: "Free"
        },
        {
            country: "India",
            type: "Not Pay"
        }
    }
]

I tried this with the code :

<div ng-repeat="list in lists">

    <ul ng-repeat="(key, value) in list.field | groupBy: 'type'">
      {{ key }}
      <li ng-repeat="country in value">
        : {{ country }} 
      </li>
    </ul>

</div>

Solved :

I use angular 1.4.9 and angular-filter 0.5.7

<div ng-repeat="list in lists">

    <ul ng-repeat="(key, value) in list.field | groupBy: 'type'">
      {{ key }}
      <li ng-repeat="item in value">
        : {{ item.country }} 
      </li>
    </ul>

</div>

you have same object `country` in `scope` `object`. Do like `ng-repeat="item in value"` and then `: {{ item.country }}` — Parth Trivedi, Jan 28 '16 at 10:11
this is what you want http://stackoverflow.com/questions/14800862/how-can-i-group-data-with-an-angular-filter ? — Siddharth, Jan 28 '16 at 10:36

Parth Trivedi · Answer 1 · 2016-01-28T11:48:33.650

you have same object country in scope object and in ng-repeat object. Change country to item.country

Check angular-filter

var app = angular.module('app', ['angular.filter']);

app.controller('MainController', function($scope) {
    var field =  [{
    "id": 1,
    "field": [
        {
            country: "Australia",
            type: "Free"
        },
        {
            country: "Australia",
            type: "Pay"
        },
        {
            country: "Australia",
            type: "Not Pay"
        },
        {
            country: "India",
            type: "Free"
        },
        {
            country: "India",
            type: "Not Pay"
        },
        {
            country: "United States",
            type: "Free"
        },
  ],
    },
    {
    "id": 2,
    "field": [
        {
            country: "Australia",
            type: "Free1"
        },
        {
            country: "Australia",
            type: "Pay1"
        },
        {
            country: "Australia",
            type: "Not Pay1"
        },
        {
            country: "India",
            type: "Free1"
        },
        {
            country: "India",
            type: "Not Pay1"
        },
        {
            country: "United States",
            type: "Free1"
        },
  ],
    }
];

   
      $scope.lists = field;
  })

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.8/angular-filter.min.js"></script>

<div ng-app="app" ng-controller="MainController">
 <div ng-repeat="list in lists">
     <ul ng-repeat="(key, value) in list.field | groupBy: 'type'">
  {{ key }}
  <li ng-repeat="item in value">
    : {{ item.country }} 
  </li>
</ul>
</div>
</div>

Please run snippet (Click Show code snippet) it works for me. — Parth Trivedi, Jan 28 '16 at 10:43
You have to make changes as i mentioned for `country` to `item.country` — Parth Trivedi, Jan 28 '16 at 10:45
@JérémieChazelle I have updated snippet with 1.4.9 and works fine. — Parth Trivedi, Jan 28 '16 at 10:49
I marked answer on @RIYAJ KHAN , his answer solved my problem. Thank you for your help !! — Jérémie Chazelle, Jan 28 '16 at 13:56
@JérémieChazelle I do not want to make any discussion as voting shows what solved your answer. and you have update your question after i answered. Still `country` to `item.country` not changed. You have updated `list in lists` `html` lastly you should make that in question it self. — Parth Trivedi, Jan 29 '16 at 09:04

RIYAJ KHAN · Accepted Answer · 2016-01-28T10:48:57.923

I have created Plunker .Please check it.

I have used angular 1.2.20 and angular-filter.min.js

I have not changes any part of HTML and JS. It's working fine for me.

JS :

var app = angular.module('app', ['angular.filter']);

    app.controller('MainController', function($scope) {

      $scope.lists = [{
        "id": 1,
        "field": [
            {
                country: "Australia",
                type: "Free"
            },
            {
                country: "Australia",
                type: "Pay"
            },
            {
                country: "Australia",
                type: "Not Pay"
            },
            {
                country: "India",
                type: "Free"
            },
            {
                country: "India",
                type: "Not Pay"
            },
            {
                country: "United States",
                type: "Free"
            },
      ],
        },
    ]

    });

HTML :

 <body ng-controller="MainController">

     <ul ng-repeat="(key, value) in lists[0].field | groupBy: 'type'">
  {{ key }}
  <li ng-repeat="country in value">
    : {{ country }} 
  </li>
</ul>
  </body>

UPDATED HTML

<div ng-repeat="list in lists">
     <ul ng-repeat="(key, value) in list.field | groupBy: 'type'">
  {{ key }}
  <li ng-repeat="country in value">
    : {{ country }} 
  </li>
</ul>
</div>

Updated Plunker

score 1 · Answer 3 · answered Jan 28 '16 at 10:54

a little correction in your code and it works fine

<div ng-app="myApp" ng-controller="myCountries">

<ul ng-repeat="(key, value) in field | groupBy: 'type'">
  {{ key }}
  <li ng-repeat="bundle in value">
    : {{ bundle.country }} 
  </li>
</ul>

here is a fiddle working

How group objects in array from ng-repeat with filter?

3 Answers3