In Angular, I need to search objects in an array

Question

In Angular, I have in scope a object which returns lots of objects. Each has an ID (this is stored in a flat file so no DB, and I seem to not be able to user ng-resource)

In my controller:

$scope.fish = [
    {category:'freshwater', id:'1', name: 'trout', more:'false'},
    {category:'freshwater', id:'2', name:'bass', more:'false'}
];

In my view I have additional information about the fish hidden by default with the ng-show more, but when I click the simple show more tab, I would like to call the function showdetails(fish.fish_id). My function would look something like:

$scope.showdetails = function(fish_id) {  
    var fish = $scope.fish.get({id: fish_id});
    fish.more = true;
}

Now in the the view the more details shows up. However after searching through the documentation I can't figure out how to search that fish array.

So how do I query the array? And in console how do I call debugger so that I have the $scope object to play with?

Adrian Gunawan · Accepted Answer · 2013-09-27 06:29:30Z

211

You can use the existing $filter service. I updated the fiddle above http://jsfiddle.net/gbW8Z/12/

 $scope.showdetails = function(fish_id) {
     var found = $filter('filter')($scope.fish, {id: fish_id}, true);
     if (found.length) {
         $scope.selected = JSON.stringify(found[0]);
     } else {
         $scope.selected = 'Not found';
     }
 }

Angular documentation is here http://docs.angularjs.org/api/ng.filter:filter

answered Sep 27, 2013 at 6:29

Adrian Gunawan

14.6k11 gold badges42 silver badges41 bronze badges

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

3 Comments

Bobby Over a year ago

very helpful - As I learn angular I'm realizing that I need to stop thinking jQuery functions first (was trying to get $.grep to do this) - rather using this $filter service was just what I needed!

surfmuggle Over a year ago

Could you add details what $scope.selected is / contains. Doing a quick-search on selected i found ng-selected / ngSelected: If the expression is truthy, then special attribute "selected" will be set on the element. Is this the same? In your example what does it do? Thanks

larv Over a year ago

Don't forget to add the $filter service to your controller. i.e: app.controller('mainController', ['$filter', function($filter) { // $filter can now be used. }]);

migontech · Accepted Answer · 2013-03-25 09:01:54Z

95

I know if that can help you a bit.

Here is something I tried to simulate for you.

Checkout the jsFiddle ;)

http://jsfiddle.net/migontech/gbW8Z/5/

Created a filter that you also can use in 'ng-repeat'

app.filter('getById', function() {
  return function(input, id) {
    var i=0, len=input.length;
    for (; i<len; i++) {
      if (+input[i].id == +id) {
        return input[i];
      }
    }
    return null;
  }
});

Usage in controller:

app.controller('SomeController', ['$scope', '$filter', function($scope, $filter) {
     $scope.fish = [{category:'freshwater', id:'1', name: 'trout', more:'false'},  {category:'freshwater', id:'2', name:'bass', more:'false'}]

     $scope.showdetails = function(fish_id){
         var found = $filter('getById')($scope.fish, fish_id);
         console.log(found);
         $scope.selected = JSON.stringify(found);
     }
}]);

If there are any questions just let me know.

answered Mar 25, 2013 at 9:01

migontech

1,53013 silver badges18 bronze badges

3 Comments

Harshavardhan Over a year ago

As Im new to angular and javascript, I'm not getting the meaning of '+' in "if (+input[i].id == +id) {" statement, can you please share your thoughts.

Anil Kumar Ram Over a year ago

Perfect Solution !!

Axel Zehden Over a year ago

I think the "+input[i].id == +id" makes sure you are comparing numbers. So you can pass 1 or '1' to the $filter and it would behave the exact same way. I'm using alphanumeric Ids, so I changed it to "input[i].id === id"

herringtown · Accepted Answer · 2013-10-03 21:33:21Z

22

To add to @migontech's answer and also his address his comment that you could "probably make it more generic", here's a way to do it. The below will allow you to search by any property:

.filter('getByProperty', function() {
    return function(propertyName, propertyValue, collection) {
        var i=0, len=collection.length;
        for (; i<len; i++) {
            if (collection[i][propertyName] == +propertyValue) {
                return collection[i];
            }
        }
        return null;
    }
});

The call to filter would then become:

var found = $filter('getByProperty')('id', fish_id, $scope.fish);

Note, I removed the unary(+) operator to allow for string-based matches...

answered Oct 3, 2013 at 21:33

herringtown

6385 silver badges12 bronze badges

2 Comments

bluehallu Over a year ago

considering the documentation states that this is the only use case for ng-init, I would say this is definitely the Angular way to do it.

rainabba Over a year ago

Very easy to understand example and very helpful

Arun P Johny · Accepted Answer · 2013-03-25 09:09:41Z

13

A dirty and easy solution could look like

$scope.showdetails = function(fish_id) {
    angular.forEach($scope.fish, function(fish, key) {
        fish.more = fish.id == fish_id;
    });
};

answered Mar 25, 2013 at 9:09

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

3 Comments

Trialcoder Over a year ago

Why this is a dirty solution ?

RedactedProfile Over a year ago

my guess would be because there may be, like, a billion fish records and we're just looping through them one by one

Mike Gledhill Over a year ago

There'd be even more records in other languages. I mean, there's plenty of fish in the C++. (Oh shut up.. I'll go and vote myself down..!!)

Md Imranur Rahman · Accepted Answer · 2015-03-08 09:16:27Z

7

Angularjs already has filter option to do this , https://docs.angularjs.org/api/ng/filter/filter

answered Mar 8, 2015 at 9:16

Md Imranur Rahman

811 silver badge3 bronze badges

Comments

Michał Jarzyna · Accepted Answer · 2016-07-20 14:45:47Z

7

Your solutions are correct but unnecessary complicated. You can use pure javascript filter function. This is your model:

     $scope.fishes = [{category:'freshwater', id:'1', name: 'trout', more:'false'},  {category:'freshwater', id:'2', name:'bass', more:'false'}];

And this is your function:

     $scope.showdetails = function(fish_id){
         var found = $scope.fishes.filter({id : fish_id});
         return found;
     };

You can also use expression:

     $scope.showdetails = function(fish_id){
         var found = $scope.fishes.filter(function(fish){ return fish.id === fish_id });
         return found;
     };

More about this function: LINK

answered Jul 20, 2016 at 14:45

Michał Jarzyna

1,91618 silver badges29 bronze badges

Comments

Ogglas · Accepted Answer · 2016-09-19 11:14:59Z

4

Saw this thread but I wanted to search for IDs that did not match my search. Code to do that:

found = $filter('filter')($scope.fish, {id: '!fish_id'}, false);

answered Sep 19, 2016 at 11:14

Ogglas

71.4k43 gold badges388 silver badges484 bronze badges

1 Comment

Kalpesh Panchal Over a year ago

This worked for me. Simple, slick, easy to test. Thanks!

Collectives™ on Stack Overflow

In Angular, I need to search objects in an array

7 Answers 7

3 Comments

3 Comments

2 Comments

3 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

3 Comments

2 Comments

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related