angular filter $http call information in controller or service

Question

I think it is best practice to use a service that returns information of a http call as a promise and these information should be added to the scope in the controller. Like:

awesomeService.getAllInformation().then(data){
  $scope.data = data;
}

Question: If i want to filter the returned information of the http call, do I do this in the controller? or in a separate method in the service? Example in Controller:

awesomeSvc.getAllInformation().then(data){
  angular.forEach(data,function(dataItem, dataIndex){
    if(dataItem === 'foo'){
       $data = dataItem
    }
  }
}

Or do i create a second service that is responsible for manipulation or filtering of the information received by the http call. Like this file structure:

File1: service for all http calls File2: service for manipulation of the calls File3: controller

So that the awesomeService call would be made in the second service:

function dataManipulationInSecondService(){
  var data = "";
  awesomeService.getAllInformation().then(data){
    angular.forEach(data,function(dataItem, dataIndex){
      if(dataItem === 'foo'){
         data = dataItem
      }
    }
  }
  return data;
}

And then in the controller:

secondService.dataManipulationInSecondService().then(data){
    $scope.data = data;
}

I hope my question is not too confusing and somebody can tell me the best practice ;)

Thanks for your help

emartinelli · Accepted Answer · 2016-03-10 19:11:41Z

In AngularJS, filters are first class citizens in the framework. All you need to do is create a named filter, with optional arguments:

app.filter('AwesomeFilter', function(){

    return function(data, name) {
       var filteredItems = [];
       angular.forEach(data,function(dataItem, dataIndex){
          if(dataItem === name){
              filteredItems.push(dataItem);
       }
       return filteredItems;
    }

}

Then you can use it in a service, controller, view, etc

Using AwesomeFilter in a Controller

Inject the $filter service, and use it to filter the data from AwesomeDataService:

app.controller('ctrl', function ($scope, $filter, AwesomeDataService) {
    $scope.data = [];
    AwesomeDataService.getAllInformation().then(function(data){
         $scope.data = $filter('AwesomeFilter')(data, 'foo');
    });
});

Using AwesomeFilter in a Service

app.factory('AwesomeDataService', function ($filter, $http) {
    return {
        getFooInformation: function() {
            return $http({...}).then(function(data) {
                return $filter('AwesomeFilter')(data.data,'foo');
            });
        }
    }
});

Using AwesomeFilter in the View

<div ng-controller="awesomeCtrl">
     <ul>
         <li ng-repeat="dataItem in data | AwesomeFilter:'foo'"> 
             {{ dataItem }}
         </li>
     </ul>
</div>

Ahmed Eid · Accepted Answer · 2015-03-21 13:36:01Z

1

don't filter the data in the same service ,, so you can reuse this service for different controllers ,, moving the filtration to the controller or another service depends on your need ,, if there will be some different controllers (for example) which will need the data filtered ,, you will need to pull the code out to a shared service,, but if the filtration is specific for each controller ,, put the filter in the controller

answered Mar 21, 2015 at 13:36

Ahmed Eid

1,1838 silver badges9 bronze badges

Comments

Or Guz · Accepted Answer · 2015-03-22 12:05:57Z

1

First of all as you already mentioned using a service is the best practice to retrieve data from the server.

As I see it, I would have used one of two options:

The filter is not reusable and only one controller would need the filtering: In this case I wouldn't filter the data on the service, It is a specific need from the controller, the filter logic will be performed in the controller.
More controllers might need to use data filtering for this service\resource: In this case I would move the filtering logic to the service, You can expose the service get method with filter params this way each controller may pass filter params to the service and the service will be able to filter the data accordingly.

As @pixelbits mentioned you can use a reusable filters (nice answer), The main difference I can think of is that by using a filter you will get all the data from the server and only then filter it. If you use the service you can move the filter logic to the server and by doing so your payload between server-client will be lighter, it might be important if you are working with a lot of data.

I hope it answered your question.

edited Mar 22, 2015 at 12:05

answered Mar 21, 2015 at 13:37

Or Guz

1,0186 silver badges13 bronze badges

1 Comment

Frank Over a year ago

But would you create a angular filter to get the subset of the data or would you put the logic directly in the controller

Collectives™ on Stack Overflow

angular filter $http call information in controller or service

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related