CODEWITHSUNDEEP
javascriptangularjs
Jérémie Chazelle
Jérémie Chazelle

Reputation: 1818

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

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>

Upvotes: 2

Views: 1912

Answers (3)

Parth Trivedi
Parth Trivedi

Reputation: 3832

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>

Upvotes: 2

Siddharth
Siddharth

Reputation: 869

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

Upvotes: 1

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

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

Upvotes: 2

Related Questions