AngularJS - Filter nested object in Javascript

Question

I've a nested object as following:

[
  {
    "$id": "25",
    "Field": {
      "$id": "26",
      "Key": "bb3927b1-fcbb-4fc4-8eff-24b7a20fad7b",
      "EntityKey": "e904000c-b0b8-49ca-8a49-42a2e5b5d295",
      "PostalCode": "12345",
      "City": "My city1"
    },
    "EntityId": "MyEntity"
  },
  {
    "$id": "27",
    "Field": {
      "$id": "28",
      "Key": "ad4f2cb5-7397-474d-aed7-ff4bcc14d292",
      "EntityKey": "e904000c-b0b8-49ca-8a49-42a2e5b5d295",
      "PostalCode": "67890",
      "City": "My city2"
    },
    "EntityId": "MyEntity"
  }
]

In my HTML page, I'd like to filter by PostalCode or City:

<select ng-model="filterBy" ng-init="filterBy='EntityId'">
  <option value="EntityId">Entity</option>
  <option value="Field.PostalCode">PostalCode</option>
  <option value="Field.City">City</option>
</select>
<input type="text" ng-model="query[filterBy]" autofocus />

Using the function in JavaScript:

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

I can see only EntityId which is working, but not the others fields.

P.S: I know how to use it in HTML binding:

    | filter: {Field: {City: 'my-value'}}

My intention is to do the same using the filter in JavaScript.

Thanks for your help.

Omar

o4ohel · Accepted Answer · 2016-01-03 00:10:45Z

1

So, which part of what you've tried doesn't work? Here's a plnkr that demonstrates the filter both in html and js.

$scope.filteredList = $filter('filter')($scope.list, {
  Field: {Name: 'City'}
});

answered Jan 3, 2016 at 0:10

o4ohel

1,78913 silver badges12 bronze badges

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

3 Comments

Omar AMRANI Over a year ago

Thanks for your swift answer o4ohel! In fact, how can I pass to my JS function dynamically the object: Field: {Name: 'City'} From a select/option for example: <select ng-model="filterBy" ng-init="filterBy='EntityId'"> <option value="EntityId">Entity</option> <option value="Field.PostalCode">PostalCode</option> <option value="Field.City">City</option> </select> <input type="text" ng-model="query[filterBy]" autofocus />

o4ohel Over a year ago

@OmarAMRANI : I've updated the plnkr with 2 caveats: * I don't know if that's what you were looking for. * Without understanding your full intent, it seems like an overly complex solution.

Omar AMRANI Over a year ago

I'm note sure if the Plunker is updated. I'm getting always the same version.. Could you pls send me the new link? Thanks!

Boris · Accepted Answer · 2016-01-03 00:19:00Z

1

You can use $filter like this to match to all fields, deeply:

$filter('filter')($scope.unfilteredList, {$: '67890'});

Or use a function:

$filter('filter')($scope.unfilteredList, function(fullObject){
  // assuming $scope.filterBy contains the string `PostalCode`
  return fullObject.Field[$scope.filterBy] === '67890';
});

answered Jan 3, 2016 at 0:19

Boris

5314 silver badges20 bronze badges

1 Comment

Omar AMRANI Over a year ago

Thanks Boris, that helps as well!

Collectives™ on Stack Overflow

AngularJS - Filter nested object in Javascript

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related