How to filter, with angular, objects of a JSON by an id that belongs to another object within the array

Question

My question is how can I filter objects from an array by comparing the id which is inside a "sub-object". Type:

animais [
   {
      id: 34,
      nome: baleia,
      categoria: {
         id: 2,
         nome: mamifero
   },
   {
      id: 23,
      nome: galinha,
      categoria: {
         id: 3,
         nome: oviparo
      }
   }
]

Following this example, I would like to catch only mammals (id == 2).

I have a service that returns to me all the animals:

app.factory('Animais', function($http){
    var animalList,
        obj = {};

    obj = {
        getAnimais:function(callback) {
            if(animalList) {
                callback(animalList);
                return false;
            } 
            else {
                $http({
                    method: 'GET',
                    url: 'http://example/api/animais'
                }).success(function(data) {
                    obj.saveAnimais:(data);
                    callback(data);
                })
            }

        },
        saveAnimais:function(data) {
            locaisList = data;
        }
    }

    return obj;
});

And mine controller is as follows:

app.controller('AnimaisCtrl', function($scope, $routeParams, $filter, Animais) {
    var myFilter = $filter;

    Animais.getAnimais(function(data) {
        $scope.animais = myFilter('filter')(data.animais, {
            id:$routeParams.id
        });
    });
});

In the view previous, the user selects the category. Then it is redirected to the animal screen that will show the animals of the selected category. Somebody give me a hand?

Answer 1

Correct me if I’m wrong, but if I understand correctly what you want is to filter a collection of objects according to a shared value between controllers.

One of the possible ways is to implement a service:

app.service('AnimaisSelecaoService', function() {
  var categoria = {};    
  var setCategoria = function(obj) {
      categoria  = obj;
  }    
  var getCategoria = function(){
      return categoria;
  }    
  return {
    setCategoria : setCategoria,
    getCategoria : getCategoria 
  };    
});

In the controller that coordinates the category selection, enter the new service and use the method AnimaisSelecaoService.setCategoria to indicate the new selection.

Inject the new service into your controller consumer:

app.controller('AnimaisCtrl', function($scope, $routeParams, $filter, 
                                       Animais, AnimaisSelecaoService) {
    Animais.getAnimais(function(data) {
        $scope.animais = 
            data.filter(function (item) { 
                return item.categoria.id === AnimaisSelecaoService.getCategoria(); 
                });
    });
});

If necessary (for scope reasons) include a $watch() for the value of the service, or use $broadcast() to announce the value change and update its interface.