Search code examples
javascriptjqueryarraysangularjsangular-filters

Angular js filter not working on some mobile devices


i am trying to filter an angular js array using custom filters in a controller,

the filters correctly worked on some mobile devices while it doesn't work on some.

Please see my code below

var app = angular.module('myApp', []);

function filter(input, filterarr) {
    return input.filter(function(e1){
        return filterarr.find(function(e2) {
            return e1.sender === e2.sender && e1.receiver === e2.receiver;
        });
    });
}

app.controller('myCtrl', function($scope) {

    var messages = [
        {sender:'fred', receiver:'josh', msg:'HI'},
        {sender:'josh', receiver:'fred', msg:'i DEY'},
        {sender:'josh', receiver:'racheal', msg:'hw re u2?'},
        {sender:'barack', receiver:'angela', msg:'Dear'},
        {sender:'fred', receiver:'josh', msg:'Hello'},
        {sender:'angela', receiver:'barack', msg:'Moin'},
        {sender:'josh', receiver:'racheal', msg:'hw re u?'}
    ];
    var name1 = 'fred';
    var name2 = 'josh';
    var myFilter = [{sender: name1, receiver: name2},{sender: name2, receiver: name1}];

    $scope.messages = filter(messages, myFilter);
});

and my html

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

<div ng-repeat="msg in messages">

    Sender : {{ msg.sender }} MSg : {{ msg.msg }} Receiver : {{ msg.receiver       }}
</div>
</div>

Solution

  • The issue was the .find() function, it was not supported on some browsers and OS , so i had to use polyfill function here

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find#Polyfill