Filters not working on array from resource

Question

I have a filter that is not returning anything when it is run on an array from a factory. But when I copy paste the array directly into the filter, it works fine. There must be a simple solution, and it is driving me crazy.

This works:

$filter('filter')([
  {"name":"firstItem","code":"one"},
  {"name":"secondItem","code":"two"},
  {"name":"thirdItem","code":"three"}
],"two",true);

This doesn't:

$filter('filter')($scope.items,"two",true);

Angular sample:

angular.module('App', ['ngResource'])

.controller('Ctrl', function($scope, $filter, Items) {
  $scope.items = Items.query();
  var codeToFilter = "two";
  $scope.badFilter = $filter('filter')($scope.items,codeToFilter,true);
  $scope.goodFilter = $filter('filter')([
    {"name":"firstItem","code":"one"},
    {"name":"secondItem","code":"two"},
    {"name":"thirdItem","code":"three"}
  ],"two",true);
})

.factory("Items", function ($resource) {
    return $resource("item-list.asp");
});

And the array returned from item-list.asp:

[{"name":"firstItem","code":"one"},{"name":"secondItem","code":"two"},{"name":"thirdItem","code":"three"}]

This is what I see on the page:

Bad Filter: []
Good Filter: [{"name":"secondItem","code":"two"}]

Tom · Accepted Answer · 2015-03-06 20:48:35Z

2

Items.query() is async and hence not resolved instantly. At the time your filter is hit, it's not populated.

Set it up like this:

Items.query(function(result) {
    $scope.items = result;
    $scope.badFilter = $filter('filter')($scope.items,codeToFilter,true);
});

edited Mar 6, 2015 at 20:48

answered Mar 6, 2015 at 20:24

Tom

7,7401 gold badge26 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

psnoonan Over a year ago

Thanks for the response! Now I am getting TypeError: undefined is not a function on the Items.query line.

Dan · Accepted Answer · 2015-03-06 20:25:20Z

0

try this it adds in the array to the control to help pass in information to the function.

.controller('Ctrl', ['$scope', '$filter', 'Items', function($scope, $filter, Items) {

and then don't forget to close the square bracket after the functions close curly brace

answered Mar 6, 2015 at 20:25

Dan

1298 bronze badges

2 Comments

Tom Over a year ago

This is exactly what he's doing except you've made it minification safe :)

Dan Over a year ago

I always wondered why we did that! I just know that's usually where my problems are. Still learning Angular glad your answer helps out.

Collectives™ on Stack Overflow

Filters not working on array from resource

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related