I have an AngularJS application that is giving me some issues in Internet Explorer 11 - In my administration area I am getting console log errors that seem to correlate with some problems I have noticed in the page with filtering data when using Internet Explorer (version 11 specifically) however fine in Chrome/Firefox etc.

Object doesn't support property or method 'findIndex' 
at Anonymous function (/js/controllers/admin/UsersController.js:363:9)

When I navigate to this line in the code this is the section in question :-

[363]   var indexInOriginalSet = $scope.originalSet.findIndex(function(u) {
[364]        return u.id == userId;
[365]   });

What is the best solution to fix this IE problem with the findIndex?

I have an AngularJS application that is giving me some issues in Internet Explorer 11 - In my administration area I am getting console log errors that seem to correlate with some problems I have noticed in the page with filtering data when using Internet Explorer (version 11 specifically) however fine in Chrome/Firefox etc.

Object doesn't support property or method 'findIndex' 
at Anonymous function (http://myapp.local/js/controllers/admin/UsersController.js:363:9)

When I navigate to this line in the code this is the section in question :-

[363]   var indexInOriginalSet = $scope.originalSet.findIndex(function(u) {
[364]        return u.id == userId;
[365]   });

What is the best solution to fix this IE problem with the findIndex?

• javascript
• internet-explorer
• internet-explorer-11

4 Answers 4

you can use a polyfill, in partirular this one:

// https://tc39.github.io/ecma262/#sec-array.prototype.findIndex
if (!Array.prototype.findIndex) {
  Object.defineProperty(Array.prototype, 'findIndex', {
    value: function(predicate) {
     // 1. Let O be ? ToObject(this value).
      if (this == null) {
        throw new TypeError('"this" is null or not defined');
      }

      var o = Object(this);

      // 2. Let len be ? ToLength(? Get(O, "length")).
      var len = o.length >>> 0;

      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
      if (typeof predicate !== 'function') {
        throw new TypeError('predicate must be a function');
      }

      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
      var thisArg = arguments[1];

      // 5. Let k be 0.
      var k = 0;

      // 6. Repeat, while k < len
      while (k < len) {
        // a. Let Pk be ! ToString(k).
        // b. Let kValue be ? Get(O, Pk).
        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
        // d. If testResult is true, return k.
        var kValue = o[k];
        if (predicate.call(thisArg, kValue, k, o)) {
          return k;
        }
        // e. Increase k by 1.
        k++;
      }

      // 7. Return -1.
      return -1;
    }
  });
}

You can find more details here

I wrote a little function to do that, what you want. It expects an array as first parameter and a filter-callback as second parameter.

var findIndex = function(arr, fn) {
    return arr.reduce(function(carry, item, idx) {
        if(fn(item, idx)) {
            return idx;
        }

        return carry;
    } , -1);
};

console.log(findIndex(arr, function(u) {
    return u.id == userId;
}));

For those who are getting this error in their Angular (>=2) application on IE, if you create the app using angular cli, you would find the file polyfills.ts in src directory or whatever is the root directory of source files created by Angular cli, find and unment the following import statements in polyfills.ts:

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';

You could also get the index another way, e.g.

const indexInOriginalSet = $scope.originalSet.findIndex(u => u.id == userId);

Is equivalent to:

const indexInOriginalSet = $scope.originalSet.indexOf(
    originalSet.filter(u => u.id == userId)[0];
);

Except indexOf and filter are supported in IE9+