angularJs $ filter JavaScript语法

Question

Tried to filter a JSON file by $routeParams:id. usually I do this:

var eventId = $routeParams.eventId;
$http.get('json/events.json')
 .success(function(data){
     angular.forEach(data,function(d){
         if(d.id == eventId)$scope.event = d;
     });

}); 

found some working code that doing this:

var eventId = $routeParams.eventId;
$http.get('json/events.json')
 .success(function(data){
    $scope.template = $filter('filter') (data, function(d){
    return d.id == eventId;
    })[0];
}); 

can you explain the syntax on the second example? especially the square brackets notation after the function call? and which approach is better ?

Thanks

Answer 1

I think first approach is better for this purpose. $filter mainly used for templates.for example if you want to use filter in ng-repeat directive.
in second example $filter returns an array of filtered data. you assigning the first element via [0] in the end. this might cause a range error if there is no data in that filtered array.

to ignore that error you might use

var filteredTemplates = $filter('filter') (data, function(d){
    return d.id == eventId;
    });
   $scope.template = (filteredTemplate.length && filteredTemplate[0])|| default_template;

and there is only a conditions to check so no need to use filter just loop through it, if you can't find the multi use, of filter you created.

EDIT : accessing the first element of an empty array will not throw error but returns undefined

Answer 2

Filters are used for formatting data displayed to the user.And its main purpose to format the data displayed in Angular template. $filter is a filter service of angular module.It holds reference to all the filters.

$filter('nameOfTheFilter')(array, expression, comparator) 

Here you are getting default filter from filter service and passing in an array and an iterator function that will be called for each element in the array. And $filter('filter') returns an array, that satisfy the return condition in the iterator function.you are assigning the fist element of the filtered array to $scope.template.It may assign undefined if an empty array is returned by the filter

  $filter('filter') (data, function(d){
    return d.id == eventId;
    })[0];