How to access property of filtered array in angular

Question

I have an array and I want to filter to get to a record that matches some other value so I'm doing this:

jobsCtrl.matchList | filter: {job_id: job.id}

Where the controller's matchList looks like this:

[{ job_id: 1, prop: 5},{job_id: 2, prop: 10 } ... ]

If I just output it like this it works: { job_id: 1, prop: 5}

But I want to access the prop property in the DOM, I would expect this to work:

{{ (jobsCtrl.matchList | filter: {job_id: job.id}).prop }}

But that just reads blank, is there a way to do this?

Thanks!

Answer 1

Since filter returns an array you can't directly access an object property of array.

You can however return the first element of the array and get the value of it's property

{{ (jobsCtrl.matchList | filter: {job_id: job.id})[0].prop }}

You wouldn't want to use this too much though, such as inside ng-repeat as it would be quite expensive . Keep in mind that digests may run multiple times each scope change

DEMO

Answer 2

Would this approach work for you?

<div ng-repeat="job in jobsCtrl.matchList | filter: {job_id: job.id}">
    <p>{{job.prop}}</p>
</div>