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, Oct 04 '15 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, Oct 04 '15 at 12:14

makeitmorehuman · Accepted Answer · 2015-10-04T18:40:04.203

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 04 '15 at 18:40

answered Oct 04 '15 at 13:00

makeitmorehuman

11,287
3
52
76

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) – Crazyman60 Oct 04 '15 at 17:28
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 – makeitmorehuman Oct 04 '15 at 18:41
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 – Crazyman60 Oct 04 '15 at 19:07
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: http://stackoverflow.com/questions/18128323/angularjs-if-you-are-not-using-a-dot-in-your-models-you-are-doing-it-wrong – makeitmorehuman Oct 04 '15 at 19:10
I am glad it helped you. – makeitmorehuman Oct 04 '15 at 19:10

score 1 · Answer 2 · answered Oct 04 '15 at 16:10

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

Thanks but already tried that, that's working in the case you don't have "keys" before data. — Crazyman60, Oct 04 '15 at 17:29

Kickaha · Answer 3 · 2015-10-04T18:08:38.390

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 04 '15 at 18:08

answered Oct 04 '15 at 12:52

Kickaha

3,680
6
38
57

1

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 – makeitmorehuman Oct 04 '15 at 13:08
@XGreen .. hash tables okay, ty.. noted. – Kickaha Oct 04 '15 at 18:14

AngularJS filtering in multiple arrays

3 Answers3