In my Angular application, I have a filter that takes a user ID and converts it into a user image URL. It does this by checking if the ID exists in an array and returning the corresponding image URL from the array passed to the filter.
The filter is functioning correctly, as the ng-repeat list displays the correct image URLs. However, I am encountering 2 errors in my console.
The first error occurs on line 4 and the second error is in 'ionic.bundle.js:13380:32'
Errors:
Error: undefined is not an object (evaluating 'members.length')
Error: [$interpolate:interr] Can't interpolate: {{ participant.athlete_id | idToImage : clubMembers }} TypeError: undefined is not an object (evaluating 'members.length')
HTML:
<div ng-repeat="participant in participants | filter:{ event_id: event.id }: true track by $index">
<img ng-src="{{ participant.athlete_id | idToImage : clubMembers }}">
</div>
Angular filter:
1 app.filter('idToImage', function () {
2 return function (id, members) {
3 var curMember = id;
4 var len = members.length - 1;
5 while(len >= 0){
6 if(curMember >= members[len].id){
7 return members[len].profile;
8 }
9 len--;
10 }
11 };
12 });
The 'clubMembers' in {{ participant.athlete_id | idToImage : clubMembers }} is an array retrieved from an external source, structured like the example below:
$scope. clubMembers = [
{"id":1234,"profile":"https://domain.net/pictures/1.jpg"},
{"id":12345,"profile":"https://domain.net/pictures/3.jpg"},
{"id":12346,"profile":"https://domain.net/pictures/4.jpg"}
]