Search a value in a nested array of objects angular2

Question

I have started working on angular2 recently.So want to know the right approach for the use-case. I have an array of Objects like this :

users : Array<Object> = [{
    id: 1,
    tags: [{
        name: 'foo',
        age: 21
    }, {
        name: 'aaa',
        age: 23
    }]
}, {
    id: 2,
    tags: [{
        name: 'ball',
        age: 53
    }, {
        name: 'ttt',
        age: 43
    }]
}, {
    id: 3,
    tags: [{
        name: 'bar',
        age: 32
    }, {
        name: 'fsf',
        age: 11
    }]
}]

I need to display this data as a table and give a search option on it. Data needs to be filtered on the basis of the text entered by a user in the search field. The data entered in the search can match any of the values in this object. I am using angular2 rc4.

I need help in implementing this search and the way I should approach it. I am also using lodash. Is there any way I can utilise its functions. ( without using jquery )

Just a syntax issue: users: Array – Kobi Cohen Aug 26 '16 at 15:15 — Kobi Cohen, Aug 26 '16 at 15:15
What does this have to do with angular? – Aug 26 '16 at 17:48 — , Aug 26 '16 at 17:48

score 0 · Answer 1 · edited May 23 '17 at 11:54

0

See here How to apply filters to *ngFor

Basically to implement a pipe that return whatever you need

edited May 23 '17 at 11:54

Community

1
1

answered Aug 26 '16 at 15:19

Kobi Cohen

678
4
9

Pipes aren't considered a great idea for most data filtering or sorting scenarios. Check out the section at the end of this page: https://angular.io/docs/ts/latest/guide/pipes.html. Example quote: "The Angular team and many experienced Angular developers strongly recommend that you move filtering and sorting logic into the component itself." – Ian Gilroy Aug 26 '16 at 15:24

4castle · Answer 2 · 2016-08-26T15:45:59.063

In Lodash, you can filter using _.filter, _.some, and _.includes:

var users = [{"id":1,"tags":[{"name":"foo","age":21},{"name":"aaa","age":23}]},{"id":2,"tags":[{"name":"ball","age":53},{"name":"ttt","age":43}]},{"id":3,"tags":[{"name":"bar","age":32},{"name":"fsf","age":11}]}];

var searchItem = "foo";

var filtered = _.filter(users, user =>
                 _.some(user.tags, tag =>
                   _.includes(tag, searchItem)));

console.log(filtered);

<script src="https://cdn.jsdelivr.net/lodash/4.15.0/lodash.min.js"></script>

If you want to find substring matches also, map the fields to a string and then use String#indexOf:

var users = [{"id":1,"tags":[{"name":"foo","age":21},{"name":"aaa","age":23}]},{"id":2,"tags":[{"name":"ball","age":53},{"name":"ttt","age":43}]},{"id":3,"tags":[{"name":"bar","age":32},{"name":"fsf","age":11}]}];

var searchItem = "f";

var filtered = _.filter(users, user =>
                 _.some(user.tags, tag =>
                   _.some(tag, field =>
                     _.toString(field).indexOf(searchItem) != -1)));

console.log(filtered);

<script src="https://cdn.jsdelivr.net/lodash/4.15.0/lodash.min.js"></script>

cullimorer · Answer 3 · 2016-08-26T15:19:31.997

-1

Here's how you'd filter in HTML, or do you want to filter in the controller?

 <li ng-repeat="user in users | filter: { tags: [{ age: search.age}] }">

I found a plunkr of someone else doing something similar:

http://jsfiddle.net/suCWn/12/

Controller:

$scope.filteredUsers = $filter('filter')(users, function(value) {

    return angular.forEach(value.tags, function(tag) {

      return tag === $scope.searchTerm;

    });
  });

edited Aug 26 '16 at 15:19

answered Aug 26 '16 at 15:11

cullimorer

755
1
5
23

I think he ask for angular2 rc4 solution – Kobi Cohen Aug 26 '16 at 15:12
Ahhh sorry yea missed that part. They didn't do away with filter in Angular 2 though did they? – cullimorer Aug 26 '16 at 15:13
I want to search in controller. And it is just like a search option you have at the top of a table. Whatever string you write in the search, table displays only the results matching the string entered. – monica Aug 26 '16 at 15:14
@cullimorer, i am using angularr2 rc4 and moreover that solution is good when i have to search based on a known key. But in this case i don't know value could be for any key. For example : If i write 1, it should return the object with id 1. If i write 'ball' then it should return the parent object with name as ball. – monica Aug 26 '16 at 15:23

Search a value in a nested array of objects angular2

3 Answers3