How to filter, with angular, JSON objects by an id belonging to another object inside the array

1

My question is how can I filter objects from an array by comparing the id that 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 take only mammalian animals (% with% == 2).

I have a service that returns 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 my id 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 controller previous, the user selects the category. Then it is redirected to the animals screen that will show the animals in the selected category. Does anyone give me strength?

    
asked by anonymous 13.11.2014 / 18:37

1 answer

2

Correct me if I'm wrong, but if I understood correctly what you want is to filter a collection of objects according to a value shared 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 category selection, inject the new service and use the AnimaisSelecaoService.setCategoria method 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) include a $watch() for the value of the service, or use $broadcast() to announce the change of value and update its interface.

    
13.11.2014 / 19:15