Find object by its property in array of objects with AngularJS way

Question

I have a array like below

var myArray = [{'id':'73','name':'john'},{'id':'45','name':'Jass'}, etc.]

Now I have an id 73 how to select this particular object from the array. I see I can do this in jQuery easily with grep Is there any angular way of doing this?

Since most user developing app with angular always get data from array of objects(mostly for table) there should be a helper function for this?

So that I can change the data of the row with the ID of the row by updating the array of object.

I don't want to bind this in view. I want to manipulate the data and update the data withing function.

For Example. I have a table listing. If end user edit a row from the table I have the ID of the object so after end user hit save, I need to update the array and then back to table listing.

@JaredSmith I'm looking for any angular helper function(like angular.isNumber) for this, not javascript default array object methods. — rram, Oct 28 '16 at 14:30
that makes no sense at all. Why would you need a framework helper function to replace a native method supported all the way back to IE 9? Unless you give a reason otherwise, it just comes across as an XY problem http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem. — Jared Smith, Oct 28 '16 at 15:14
I can understand why you wouldn't want to include jquery if you're already using angular, but `.filter` is both native and well-supported. If you can give a compelling reason why angular, and angular alone, **must** be used to solve this problem I'll retract the close vote. — Jared Smith, Oct 28 '16 at 15:15
OP wanted an [tag:angularjs] answer. The target dupe didn't answer the question. Just like a jQuery solution doesn't answer a [tag:javascript] question. — Cerbrus, Nov 01 '16 at 13:29
__[This question is being discussed on meta](http://meta.stackoverflow.com/questions/337229/can-we-do-something-how-do-i-do-x-in-angular-react-frameworky)__ — Cerbrus, Nov 01 '16 at 13:33
@JaredSmith OP answered you, but in a comment on the accepted answer: "I was thinking to apply the filter only in view mode with markup". When one doesn't specify their requirements fully in the question, one tends to waste a lot of other people's time. That's kinda rude to people who are trying to help you. — , Nov 01 '16 at 16:09

score 82 · Accepted Answer · answered Oct 28 '16 at 14:16

82

you can use angular's filter https://docs.angularjs.org/api/ng/filter/filter

in your controller:

$filter('filter')(myArray, {'id':73})

or in your HTML

{{ myArray | filter : {'id':73} }}

answered Oct 28 '16 at 14:16

M B

2,326
24
33

Thanks +1 I was thinking to apply the filter only in view mode with markup, thanks for the idea to use it in controller too. – rram Oct 28 '16 at 14:27
5

Just a note to fellow learners, We need to pass `$filter`in our controller in order to use this method. – rram Oct 28 '16 at 14:36
21

Worth noting that the above code will filter based upon the ID being a substring. So filtering on an id of 73 would also find 733, 4573, 173 etc. To get a strict comparison you must pass a third comparator parameter of 'true' as per the docs. – Hooligancat May 05 '17 at 18:54
Is there any way to store the result in HTML? I need that filter result in some loop. so this will reduce my filter process in each loop iteration. BTW i am new to angular. Thanks. – Govind Totla Mar 29 '19 at 13:04

score 48 · Answer 2 · answered Oct 28 '16 at 14:18

48

How about plain JavaScript? More about Array.prototype.filter().

var myArray = [{'id': '73', 'name': 'john'}, {'id': '45', 'name': 'Jass'}]

var item73 = myArray.filter(function(item) {
  return item.id === '73';
})[0];

// even nicer with ES6 arrow functions:
// var item73 = myArray.filter(i => i.id === '73')[0];

console.log(item73); // {"id": "73", "name": "john"}

answered Oct 28 '16 at 14:18

TimoStaudinger

41,396
16
88
94

Thanks +1 for the help. I already saw the JavaScript filter method, I was looking for angular way. – rram Oct 28 '16 at 14:28
How about using `FIND` instead? – Rafael Herscovici Mar 08 '19 at 14:37
@Dementic `find` support was still pretty fresh in Chrome when the answer was written, and for example is not available in IE at all. `filter` on the other hand is. – TimoStaudinger Mar 09 '19 at 22:47
1

IE ? What is that ? :) – Rafael Herscovici Mar 10 '19 at 15:24

score 12 · Answer 3 · answered Aug 08 '18 at 09:17

For complete M B answer, if you want to access to an specific attribute of this object already filtered from the array in your HTML, you will have to do it in this way:

{{ (myArray | filter : {'id':73})[0].name }}

So, in this case, it will print john in the HTML.

Regards!

score 1 · Answer 4 · answered Sep 19 '18 at 14:17

1

The solucion that work for me is the following

$filter('filter')(data, {'id':10})

answered Sep 19 '18 at 14:17

Jorge Santos Neill

1,635
13
6

Find object by its property in array of objects with AngularJS way

4 Answers4