AngularJS filtering in multiple arrays

Question

I'm trying to apply filter on a list of objects but I can't manage to make it work. I've read that AngularJS does not provide "out of box" multiples objects filtering, may be that's why it's not working?

Here is my code:

<div class="list list-inset">
    <label class="item item-input" id="events-search">
        <i class="icon ion-search placeholder-icon"></i>
        <input type="text" placeholder="Rechercher parmis les evenements" ng-model="nsearch">
    </label>
</div>

<div class="list">

    <a class="item item-thumbnail-left" href="#" ng-repeat="info in infos | filter:nsearch">
        <img src="xxx">
        <h2>{{ info.name }}</h2>
        <p>{{ info.date}} à {{ info.hour }}</p>
    </a>

</div>

For example, "infos" value would be something like:

Q5PAvIQ2x8TLNkZmhTr59s984ALI5s10 {
    name: "This is an event",
    ...
},
jj8oB6WemYVsGZ1FSm31DFBtSlM0pfZK {
    name: "This is a second event",
    ...
}

I'm trying to filter by name.

Does anyone have an idea?... thanks!

Are you asking how to filter a list of JavaScript objects by one or more property values? — Robert Moskal
– Robert Moskal, Commented Oct 4, 2015 at 12:07
Sorry If my question is not clear. I want to filter array with multiple objets in it, actually, my array is formated like { id1: {name:"name"}, id2: {name:"name"} }, but every AngularJS example I see is like { name: "name", name:"name" }, you see what I mean? — Crazyman60
– Crazyman60, Commented Oct 4, 2015 at 12:14

Ali Habibzadeh · Accepted Answer · 2015-10-04 18:40:04Z

1

If your data is in a hash table rather than an actual array then you need to use the key, value notation for accessing the data in a ng-repeat:

 <a class="item item-thumbnail-left" href="#" ng-repeat="(key, value) in searchedInfos()">
       <h2>{{ value.name }}</h2>
 </a>

In such arrangement angular's filter can not be simply applied to a non array set, so you have a create a custom filtering function on the your scope which would take it's value from a an input:

<input type="text" ng-model="view.searchStr"/>

and on the scope:

$scope.infos = {
    Q5PAvIQ2x8TLNkZmhTr59s984ALI5s10: {
        name: "This is an event"
    },
    jj8oB6WemYVsGZ1FSm31DFBtSlM0pfZK: {
        name: "This is a second event"
    }
};

$scope.view = {
    searchStr : ""
}

$scope.searchedInfos = function(){

    var searched = {};

    if ($scope.view.searchStr) {

        angular.forEach($scope.infos, function(value, key){

            if (value.name.toLowerCase().indexOf($scope.view.searchStr.toLowerCase()) != -1) {

                searched[key] = value;

            }
        });

    }

    else {

        searched = $scope.infos;
    }

    return searched;
}

Here is a working fiddle

edited Oct 4, 2015 at 18:40

answered Oct 4, 2015 at 13:00

Ali Habibzadeh

11.6k4 gold badges56 silver badges79 bronze badges

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

5 Comments

Crazyman60 Over a year ago

Thank you for the very detailled example, unfortunately, even after 1hour trying to know what I may do wrong.. In every cases "$scope.searchedInfos" is called, the "Else" statement is always called, even if i'm typing something that doesn't match the pattern.. Maybe it's because I'm using AngularJS in Ionic? (Cordova)

Ali Habibzadeh Over a year ago

Perhaps you have complexities in your scope inheritance model. I have updated the answer to use dot notation in the model in order get around such possible issues. Try it again

Crazyman60 Over a year ago

Wow dude, thanks alot, it's working like a charm... Can you explain me why it was not working? I see that you've put one more "parameter" before the "searchStr" but I don't understand why it was not working before. Anyways, thanks again dude

Ali Habibzadeh Over a year ago

I could add a whole more stuff about that here but that firstly is not related to this question and secondly has been beautifully answered already by others: stackoverflow.com/questions/18128323/…

Ali Habibzadeh Over a year ago

I am glad it helped you.

Mostafa Ahmed · Accepted Answer · 2015-10-04 16:10:40Z

1

if infos will be an array of objects and you want to filter by the name not all the object variables in the system so all you need to do is to convert the search variable to be an object and but in it the same variable name that you want to search with

in your code you only need to convert the ng-model of the input to be like this

<input type="text" placeholder="Rechercher parmis les evenements" ng-model="nsearch.name">

and complete the rest of the code as it is

answered Oct 4, 2015 at 16:10

Mostafa Ahmed

6615 silver badges7 bronze badges

1 Comment

Crazyman60 Over a year ago

Thanks but already tried that, that's working in the case you don't have "keys" before data.

Kickaha · Accepted Answer · 2015-10-04 18:08:38Z

0

As the name is variable and unusable in a repeat you could reference by index

<h2>{{ info[0].name }}</h2>
        <p>{{ info[0].date}} à {{ info[0].hour }}</p>

In your 'something like this' json array you probably need a comma

[Q5PAvIQ2x8TLNkZmhTr59s984ALI5s10 , {
    name: "This is an event",
...},
jj8oB6WemYVsGZ1FSm31DFBtSlM0pfZK ,  {
    name: "This is a second event",
...},

...]

, each info element will only has 1 element and can be referenced with [0]

edited Oct 4, 2015 at 18:08

answered Oct 4, 2015 at 12:52

Kickaha

3,8678 gold badges41 silver badges61 bronze badges

2 Comments

Ali Habibzadeh Over a year ago

the data does not necessarily need to be in an array. A hash table is a valid case for ng-repeat. You shouldn't be forcing the data into an array unless you have a valid reason for it

Kickaha Over a year ago

@XGreen .. hash tables okay, ty.. noted.

Collectives™ on Stack Overflow

AngularJS filtering in multiple arrays

3 Answers 3

5 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related