Two identical nested ng-repeat filters from JSON - One doesn't work?

Question

I have a few JSON data sources that I use to filter through data in ng-repeat loops. One set works perfect together, the other (which is seemingly identical) does not and I have no idea why.

Module:

var app = angular.module('myApp', ['app.services.data']);

Services

angular.module('app.services.data', [])
.service('emails', ['$http', function($http){
   var promise = null;
      return function() {
        if (promise) {
          return promise;
        } else {
          promise = $http.get('data/emails.json');
          return promise;
        }
      };
  }])
  .service('brands', ['$http', function($http){
     var promise = null;
      return function() {
        if (promise) {
          return promise;
        } else {
          promise = $http.get('data/brands.json');
          return promise;
        }
      };
  }])
  .service('collections', ['$http', function($http){
        var promise = null;
      return function() {
        if (promise) {
          return promise;
        } else {
          promise = $http.get('data/collections.json');
          return promise;
        }
      };
  }]);

emails.json example:

[
   {
      "id": 32,
      "emailMetrics" [],
      "date": "2015-04-24",
      "brand": "Brand A"
   }
]

brands.json example:

[
   {
      "id": 48,
      "brandMetrics" [],
      "name": "Brand K"
   }
]

collections.json example:

[
   {
      "id": 23,
      "collectionMetrics" [],
      "name": "Collection D"
   }
]

Controller:

angular.module('myApp').controller('mainCtrl', ['$scope', 'emails', 'brands', 'collections', function($scope, emails, brands, collections) {
   emails().success(function(emails) {
      $scope.emails = emails;
   });    
   brands().success(function(brands) {
      $scope.brands = brands;
   });
   collections().success(function(collections) {
      $scope.collections = collections;
   });

   $scope.viewCount = 'metrics[0].views';
}]);

View:

<ul data-ng-repeat="brand in brands | orderBy:viewCount:true | limitTo:'4'">
    <li>Some Label</li>
    <li class="card" data-ng-repeat="email in emails | orderBy:viewCount:true | filter:{brand:brand.name} | limitTo:'3'">
      ... 
    </li>
</ul>

<ul data-ng-repeat="collection in collections | orderBy:viewCount:true | limitTo:'2'">
    <li>Some Label</li>
    <li class="card" data-ng-repeat="email in emails | orderBy:viewCount:true | filter:{collection:collection.name} | limitTo:'7'">
      ... 
    </li>
</ul>

In the above example, the first parent / child loop works flawlessly. The first ng-repeat queries the "brands" JSON for the 4 most popular brands based on view count, then the nested ng-repeat gets the 3 most popular emails from the "emails" JSON and filters the data using the key/value from the parent ng-repeat.

However, the second section fails without executing a loop. This is very odd because they are both identical except for a different name for the parent repeat.

All code has been linted / validated.

Does anyone have any thoughts as to why there would be a problem?

Answer 1

The problem is your filter on the email list in the two repeats.

The first repeat is filtering using filter: {brand:brand.name} . This is searching each email object for an attribute "brand" that matches the value in brand.name defined in this ng-repeat . This works fine.

Your second repeat is filtering using filter: {collection:collection.name} . This is the problem, since your email objects do not have a "collection" key/value pair on them. This effectively filters out all emails.

emails.json should look like this:

[
   {
      "id": 32,
      "emailMetrics" [],
      "date": "2015-04-24",
      "brand": "Brand A",
      "collection": "Collection D"
   }
]