Angular (1.x) filter not working with array of objects

Question

I am trying to take input a search term like so:

<div class="form-group">
    <input type="text" class="form-control" ng-model="vm.search.term" placeholder="Enter search term">
</div>

And then using this search term as filter on an array of objects being rendered using ng-repeat, like so:

<tbody>
    <tr ng-repeat="p in vm.items track by $index | filter: vm.search.term">
        <td><a>{{p.uid}}</a></td>
        <td>{{p.em}}</td>
        <td>{{p.ct | date:'medium'}}</td>
    </tr>
</tbody>

But in the developer's console, I am getting the following error:

dashboard-js-bundle.min.js:117 Error: [filter:notarray] http://errors.angularjs.org/1.5.5/filter/notarray?p0=0
    at dashboard-js-bundle.min.js:6
    at dashboard-js-bundle.min.js:161
    at fn (eval at compile (dashboard-js-bundle.min.js:230), <anonymous>:4:345)
    at y (dashboard-js-bundle.min.js:298)
    at dashboard-js-bundle.min.js:298
    at dashboard-js-bundle.min.js:141
    at n.$digest (dashboard-js-bundle.min.js:142)
    at n.$apply (dashboard-js-bundle.min.js:145)
    at l (dashboard-js-bundle.min.js:97)
    at H (dashboard-js-bundle.min.js:101)

Edit: Here is how the items array looks like:

(50) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0
:
{_id: "59d1f68dc1f8554acbb65533", __v: 0, cid: "59c89f29569cb11336420d3c", uid: "1234", em: "ap@gmai.com", …}
1
:
{_id: "59d2cd255b45b78d2108f399", uid: "2315", cid: "59c89f29569cb11336420d3c", em: "vf@gmail.com", tags: "l", …}
2
:
{_id: "59d2ce515b45b78d21090022", uid: "123", cid: "59c89f29569cb11336420d3c", em: "dan@gmail.com", tags: "h", …}
3
:
{_id: "59d2ce515b45b78d21090023", uid: "4561", cid: "59c89f29569cb11336420d3c", em: "lp@fg.com", tags: "Z", …}
4
:
{_id: "59d2d38c5b45b78d21093941", uid: "3412", cid: "59c89f29569cb11336420d3c", em: "gh@we.com", tags: "pl", …}

...

Please help me find out what I am doing wrong and how I can correct it. TIA.

Sajeetharan · Accepted Answer · 2017-10-05T06:50:21.613

According to your post, it should be,

  <tr ng-repeat="p in vm.items | filter: vm.search.term  track by $index ">

DEMO

var app = angular.module('testApp',[]);
app.controller('testCtrl',function(){
  var vm = this;
  vm.items = [{
  "id": 1,
  "uid": 1,
  "em": "dmacgragh0@dagondesign.com",
  "cid": 61,
  "tags": "31-379-4639"
}, {
  "id": 2,
  "uid": 2,
  "em": "vattac1@istockphoto.com",
  "cid": 73,
  "tags": "88-631-0461"
}, {
  "id": 3,
  "uid": 3,
  "em": "nivers2@vk.com",
  "cid": 9,
  "tags": "25-518-4995"
}];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="testApp">
<div ng-controller= "testCtrl as vm">
    <input type="text" class="form-control" ng-model="vm.search.term" placeholder="Enter search term">
 <table>
 <tbody>
    <tr ng-repeat="p in vm.items  | filter: vm.search.term track by $index">
        <td><a>{{p.uid}}</a></td>
        <td>{{p.em}}</td>      
    </tr>
</tbody>
</table>
</div>
</body>

Angular (1.x) filter not working with array of objects

1 Answers1