AngularJS ng-repeat with filter - notarray error

Question

I have a list of items that I'm displaying with ng-repeat. I want to add a filter to show/hide archived items.

I have added a checkbox:

<input type="checkbox" ng-model="queryFilter.archived">Show archived messages

In my controller I have this:

$scope.queryFilter = {
    archived: false
};

My list of items is displayed in a table. I've tried the following:

<tr ng-repeat="message in messages | filter : queryFilter">

<tr ng-repeat="message in messages | filter : { archived: queryFilter.archived }">

<tr ng-repeat="message in messages | filter : queryFilter track by $index">

I get this error:

Error: [filter:notarray]

Expected array but received: {}

The filtering does work but I want to know why I am getting the error.

Solution 1

Your messages must be containing the data in Object form not in the Array form.

That is why this error is being thrown. Check the doc https://docs.angularjs.org/error/filter/notarray

From the docs:

Filter must be used with an array so a subset of items can be returned. The array can be initialized asynchronously and therefore null or undefined won't throw this error.

So make sure, your $scope.messages containing data in array form not in the Object form.

Solution 2

I had initialised messages as an object.

Changing $scope.messages = {}; to $scope.messages = []; made the error go away.

Solution 3

The track by $ index makes angular syntax incorrect, since it is directly positioned behind the filter instruction. Try moving it behind the repeat statement so there is a clear separation between the track by and filter statements.

<tr ng-repeat="message in messages | filter : queryFilter track by $index">

Solution 4

queryfilter is an object not an array. So apply the ng-repeat on queryfilter as given below <tr ng-repeat = "message in messages | filter : queryFilter track by $index">

if queryfilter is array then simply use

<tr ng-repeat = "message in messages | filter : queryFilter">

track by $index is necessary whenever we loop the object

View more solutions