AngularJS: filter ng-repeat by array with multiple objects

Question

I have a ng-repeat filtered by the parameters city & first_name, as in the example:

vm.search = {
    "city": "D.C.",
    "first_name": "Chu"
};

<li ng-repeat="item in user | filter: search">...

var appname = 'app';
var dependencies = [];
angular.module(appname, dependencies);

var app = angular.module(appname);

var userC = function ($scope) {
	var vm = $scope;

    vm.search = {
        "city": "D.C.",
        "first_name": "Chu"
    };
  
    vm.user = [
        {
            "id": 1,
            "first_name": "Chuck",
            "last_name": "Norris",          
            "city": "Washington D.C.",
            "languages": [
                {
                    "id": "41",
                    "name": "English"
                },
                {
                    "id": "73",
                    "name": "Japanese"
                }
            ]
        }
    ];
};

app.controller('userC', userC);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<ul ng-app="app" ng-controller="userC">
    <li ng-repeat="item in user | filter: search track by item.id">
        {{ item.first_name }} {{ item.last_name }}
    </li>
</ul>

But now I need to filter by languages which is an array of objects:

vm.search = {
    "languages": [
      {
        "name": "Japanese"
      }
    ]
};

<li ng-repeat="item in user | filter: search">...

var appname = 'app';
var dependencies = [];
angular.module(appname, dependencies);

var app = angular.module(appname);

var userC = function ($scope) {
	var vm = $scope;

    vm.search = {
        "languages": [
          {
            "name": "Japanese"
          }
        ]
    };
  
    vm.user = [
        {
            "id": 1,
            "first_name": "Chuck",
            "last_name": "Norris",          
            "city": "Washington D.C.",
            "languages": [
                {
                    "id": "41",
                    "name": "English"
                },
                {
                    "id": "73",
                    "name": "Japanese"
                }
            ]
        }
    ];
};

app.controller('userC', userC);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<ul ng-app="app" ng-controller="userC">
    <li ng-repeat="item in user | filter: search track by item.id">
        {{ item.first_name }} {{ item.last_name }}
    </li>
</ul>

As you can see, there are no results because the default filter doesn't do the job.

Can someone help me achieving a filter that suits this last case?

Both examples are here:

Use filter function instead. see stackoverflow.com/questions/16563018/… — sdfacre
– sdfacre, Commented Jan 13, 2016 at 23:16

Samir Aguiar · Accepted Answer · 2016-01-14 03:21:47Z

1

You have to declare languages as an object:

vm.search = {
    "languages":
      {
        "name": "Japanese"
      }
};

Here's the codepen.

Update after comment: if you want a more complex filter, you can use a function instead of an object. Angular will call Array.prototype.filter() on your user array, so your function could be defined this way:

var allowedLanguages = [
  "Japanese",
  "Brazilian Portuguese"
];

vm.search = function(item) {
  for (var i = 0; i < item.languages.length; i++) {
    if (allowedLanguages.indexOf(item.languages[i].name) !== -1) {
      return true;
    }
  }

  return false;
};

edited Jan 14, 2016 at 3:21

answered Jan 13, 2016 at 23:17

Samir Aguiar

2,5692 gold badges22 silver badges32 bronze badges

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

3 Comments

ghuroo Over a year ago

T H A N K. Y O U. so simple and clean. I guess the default angularjs filter works only with objects?

ghuroo Over a year ago

Edit: Sorry but with this method I'm not able to filter by multiple languages. For example: I need to filter users having either "Japanese" or "Brazillian Portuguese" as languages.

ghuroo Over a year ago

I'll have a look as soon as I can, thank you for your time!

Collectives™ on Stack Overflow

AngularJS: filter ng-repeat by array with multiple objects

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related