Angularjs filter nested object

Question

I have in angular nested object like this. is there way how to filter it for nested property

<li ng-repeat="shop in shops | filter:search">
search.locations.city_id = 22

I'm showing only parent element but want to filter by both of it, like:

search = 
  category_id: 2
  locations:
    city_id: 368

[
 name: "xxx"
 category_id: 1
 locations: [
   city_id: 368
   region_id: 4
  ,
   city_id: 368
   region_id: 4
  ,
   city_id: 368
   region_id: 4
  ]
,
 name: "xxx"
 category_id: 2
 locations: [
   city_id: 30
   region_id: 4
  ,
   city_id: 22
   region_id: 2
  ]
]

martinoss · Accepted Answer · 2014-05-31 12:45:18Z

28

You also can filter like this (version 1.2.13+)

<li ng-repeat="shop in shops | filter: { locations: [{ city_id: search.locations.city_id }] }">

answered May 31, 2014 at 12:45

martinoss

5,4982 gold badges48 silver badges56 bronze badges

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

4 Comments

zajca Over a year ago

well this is working, but by default results are not shown only after input. jsfiddle.net/suCWn/12

Josh Diehl Over a year ago

@zajca you can workaround by assigning model a value in the controller: $scope.selectedCityId = ''. That has the effect of loading all items before manually changing input

Envek Over a year ago

Please be aware of the fact that standard filter compares values as strings matching them from beginning. If you request city_id 1 it will return shops located in cities with ids 10, 15, or 12345. Also it will search only in first object in array, To avoid this you will need to write your own comparator or filter. See example: plnkr.co/edit/Jirxxi

The DIMM Reaper Over a year ago

-1: @Envek's comment that "it will search only in first object in array" stands to be emphasized. Using the fiddle you gave, the OP's example search term (city_id = 22) doesn't find a result, although the object with category_id = 2 has a location with that property value.

Jesus is Lord · Accepted Answer · 2013-08-29 08:19:58Z

10

Yes, you can, if I understood your example properly.

Depending on the size of your collection it may be better to compute the collection you iterate over in ng-repeat so that the filter isn't doing it constantly as the model changes.

http://jsfiddle.net/suCWn/

Basically you do something like this, if I understood you correctly:

$scope.search = function (shop) {

    if ($scope.selectedCityId === undefined || $scope.selectedCityId.length === 0) {
        return true;
    }

    var found = false;
    angular.forEach(shop.locations, function (location) {          
        if (location.city_id === parseInt($scope.selectedCityId)) {
            found = true;
        }
    });

    return found;
};

answered Aug 29, 2013 at 8:19

Jesus is Lord

15.4k11 gold badges71 silver badges103 bronze badges

Comments

Damain Joseph · Accepted Answer · 2014-12-22 21:55:31Z

0

Updated "Words Like Jared" answer to use regular expressions to check if it contains the searchterm. This way starts filtering when you type in 1 number so you don't have to match the entire word

JSfiddle

    angular.forEach(shop.locations, function (location) {          
        if (checknum(location.city_id)) {
            found = true;
        }
    });

    function checknum(num){
        var regx = new RegExp($scope.selectedCityId);
        return regx.test(num);
    };

answered Dec 22, 2014 at 21:55

Damain Joseph

11 bronze badge

Collectives™ on Stack Overflow

Angularjs filter nested object

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related