Can you use array.filter in an Angular binding?

Question

I have this line in my template:

<span>{{ data.things.find(r => { return r.id == 5 }).description }}</span>

When I run this, I get the following error:

Parser Error: Bindings cannot contain assignments at column...

Does this mean you can't use array.find from within a binding?

I know my objects have values, and the expression evaluates in the watch window. Any suggestions?

Edit: While this question and its answer will get around the issue, I don't think they are duplicates. That question is specific to filtering to a smaller list, perhaps one record, where as my problem is getting one record everytime. @Thierry-Templier's answer looks good in this regard, and I like how clean it makes the html.

Possible duplicate of angular 2 sort and filter

Günter Zöchbauer
– Günter Zöchbauer

2016-03-14 11:57:41 +00:00
Commented Mar 14, 2016 at 11:57 — Günter Zöchbauer
– Günter Zöchbauer, Commented Mar 14, 2016 at 11:57

Thierry Templier · Accepted Answer · 2016-03-14 11:58:44Z

7

You could also implement a custom pipe:

@Pipe({
  name: 'filterBy'
})
export class FilterPipe {
  transform(value: [], args: string[]) : any {
    let fieldName = args[0];
    let fieldValue = args[1];
    return value.filter((e) => {
      return (e[fieldName] == fieldValue);
    });
  }
}

and use it this way:

@Component({
  selector: 'my-app',
  template: `
    <span>{{(data.thing | filterBy:'id':'5') | json}}</span>
  `,
  pipes: [ FilterPipe ]
})
export class AppComponent {
  constructor() {
    this.data = {
      thing: [
        {
          id: 4,
          description: 'desc1'
        },
        {
          id: 5,
          description: 'desc3'
        }
      ]
    }
  }
}

See this plunkr: https://plnkr.co/edit/D2xSiF?p=preview.

answered Mar 14, 2016 at 11:58

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

1 Comment

Jackson Vaughan Over a year ago

Slight modification for at least angular 7: ``` import { Pipe, PipeTransform } from '@angular/core' @Pipe({ name: 'filterBy' }) export class FilterPipe implements PipeTransform { transform(value: [], fieldName: string, fieldValue: string): any { // console.log('filter args: ', args) // let fieldName = args[0]; // let fieldValue = args[1]; console.log('FILTER: ', fieldName, fieldValue) return value.filter((e) => { return (e[fieldName] == fieldValue); }); } }```

manish · Accepted Answer · 2016-03-14 11:23:09Z

1

If you are using angular 2. (you didn't mentioned the angular version you are using, and added tags for both version): I don't know if its the best way, but this should work:

Angular -2

<span *ngFor="#thing of data.things">
    <span *ngIf="thing.id == 5">{{thing.description}}</span>
</span>

Angular -1 : Same logic, just change the syntax

answered Mar 14, 2016 at 11:23

manish

9962 gold badges12 silver badges35 bronze badges

2 Comments

Des Horsley Over a year ago

Thanks, I'm using Angular2. That should work, I was hope there is a more succinct way of writing it.

Günter Zöchbauer Over a year ago

You can create a custom filter pipe stackoverflow.com/questions/32882013/angular-2-sort-and-filter

Collectives™ on Stack Overflow

Can you use array.filter in an Angular binding?

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related