The data passed to the custom filter is undefined
I'm new to AngularJS, so I'm sorry if I'm asking for something stupid (which I most likely am doing).
I created my own filter:
angular.module("customFilters", [])
.filter("mainGroups", function() {
return function(data) {
var results = [];
console.log(data);
for (var i = 0; i < data.length; i++) {
if (data[i].mainGroup == 1 || data[i].mainGroup == 2 || data[i].mainGroup == 3) {
results.push(data[i]);
}
}
return results;
}
});
I am applying this filter:
ng-options="group.description for group in data.mainGroups.itemMainGroups | mainGroups | orderBy: 'description'"
In the console (via console.log) I can clearly see that the data is an array of 15 objects. Angular.isArray(data)
also returns true. However, I am getting these errors:
TypeError: Cannot read property 'length' of undefined
What am I doing wrong here?
+3
source to share
2 answers
I managed to solve the problem myself by simply executing the code when angular.isArray(data)
is true. I don't know why this works, but at least it does.
angular.module("customFilters", [])
.filter("mainGroups", function() {
return function(data) {
if (angular.isArray(data)) {
var results = [];
console.log(data);
for (var i = 0; i < data.length; i++) {
if (data[i].mainGroup == 1 || data[i].mainGroup == 2 || data[i].mainGroup == 3) {
results.push(data[i]);
}
}
return results;
} else {
return data;
}
});
0
source to share
Your filter seems to be working. it might be a data problem.
angular.module("customFilters", [])
.controller('myController', function($scope) {
$scope.data = [{
id: 1,
mainGroup: 1,
description : 'M'
}, {
id: 2,
mainGroup: 2,
description : 'N'
}, {
id: 3,
mainGroup: 3,
description : 'A'
}, {
id: 4,
mainGroup: 4,
description : 'H'
}, {
id: 5,
mainGroup: -1,
description : 'S'
}, {
id: 6,
mainGroup: 1,
description : 'B'
}, {
id: 7,
mainGroup: 2,
description : 'R'
}, {
id: 8,
mainGroup: 3,
description : 'G'
}, ];
})
.filter("mainGroups", function() {
return function(data) {
var results = [];
console.log(data);
for (var i = 0; i < data.length; i++) {
if (data[i].mainGroup == 1 || data[i].mainGroup == 2 || data[i].mainGroup == 3) {
results.push(data[i]);
}
}
return results;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="customFilters" ng-controller="myController">
<select ng-model="myColor" ng-options="group.description for group in data | mainGroups | orderBy:'description'" ></select> <span>Show 6 out of 8 entries</span>
<div ng-repeat="item in data | mainGroups"><pre ng-bind="item | json"></pre>
</div>
</div>
0
source to share