AngularJS filter list on sub element in array

Question

I am trying to create a simple AngularJS filter on a list. However the element I want to filter on is a sub-element in an array.

(JSFIDDLE)

The objects:

elements = [{
    'claim': [{value:'foo'}],
    class: 'class1',
    subject: 'name1'
}, {
    'claim':  [{value:'bar'}],
    class: 'class1',
    subject: 'name2'
}, {
    'claim':  [{value:'baz'}],
    class: 'class1',
    subject: 'name2'
}, {
    'claim':  [{value:'quux'}],
    class: 'class1',
    subject: 'name3'
}];

HTML:

<tr class='claimrow' 
    data-ng-repeat='c in elements | filter:{claim[0].value:srcBoxFilter} | orderBy: "claim[0].value" '>

The order by handles the syntax "claim[0].value" but the filter does not.

This generates an error:

Error: Syntax Error: Token '[' is unexpected, expecting [:] 
at column 25 of the expression 
[elements | filter:{claim[0].value:srcBoxFilter} | orderBy: "claim[0].value"] 
starting at [[0].value:srcBoxFilter} | orderBy: "claim[0].value"].

possible duplicate of Nested filtering with Angular.js version 1.2.18 — Blackhole
– Blackhole, Commented Jul 12, 2014 at 13:08
This is different because of the introduction of the array. I have tried filter:{claim:[{value:srcBoxFilter}]} but that does not seem to work (Although the error disappears) — ed4becky
– ed4becky, Commented Jul 12, 2014 at 13:11

David Spence · Accepted Answer · 2014-07-12 14:47:24Z

1

Interesting problem. Especially because the nested array value works for ordering but not filtering. I had a play with your JSFiddle and couldn't get anything out of the box working. You could get around this very easily by writing your own filter.

I've updated your JSFiddle to show how you could do this. The only changes I made to your code are shown below:

JavaScript

myApp.filter('byFirstClaimValue', function () {
    return function (items, filterText) {
        if(!filterText)
            return items;

        var out = [];
        for (var i = 0; i < items.length; i++) {
            if (items[i].claim[0].value.toLowerCase().indexOf(filterText.toLowerCase()) > -1) {
                out.push(items[i]);
            }
        }
        return out;
    }
});

HTML

<tr class="claimrow" data-ng-repeat="c in elements | byFirstClaimValue:srcBoxFilter | orderBy: 'claim[0].value'">

answered Jul 12, 2014 at 14:47

David Spence

8,0893 gold badges42 silver badges68 bronze badges

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

2 Comments

ed4becky Over a year ago

I knew creating my own was an option, but thought there should be an 'out of the box' solution. Or at least an inline function solution

David Spence Over a year ago

Yea, it seems like what you had should've worked given that the order works... +1'd your question :)

Collectives™ on Stack Overflow

AngularJS filter list on sub element in array

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related