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
– Parth Trivedi, Commented Jan 28, 2016 at 10:11
this is what you want stackoverflow.com/questions/14800862/… ? — Siddharth
– Siddharth, Commented Jan 28, 2016 at 10:36

RIYAJ KHAN · Accepted Answer · 2016-01-28 10:48:57Z

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

Parth Trivedi · Accepted Answer · 2016-01-28 11:48:33Z

2

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>

edited Jan 28, 2016 at 11:48

answered Jan 28, 2016 at 10:14

Parth Trivedi

3,8321 gold badge23 silver badges41 bronze badges

7 Comments

Jérémie Chazelle Over a year ago

I have the same error..  Just with <ul ng-repeat="(key, value) in field | groupBy: 'type'"> {{ key }} </ul>

Parth Trivedi Over a year ago

Can you write how your field setted in Controller

Parth Trivedi Over a year ago

Please run snippet (Click Show code snippet) it works for me.

Parth Trivedi Over a year ago

You have to make changes as i mentioned for country to item.country

Parth Trivedi Over a year ago

@JérémieChazelle I have updated snippet with 1.4.9 and works fine.

|

Siddharth · Accepted Answer · 2016-01-28 10:54:50Z

1

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

answered Jan 28, 2016 at 10:54

Siddharth

8698 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related