"Object doesn't support property or method 'find'" in IE

Asked 13/6, 2016 at 11:23 Answered 28/11, 2021 at 6:30

javascript c#visual-studio internet-explorer

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <script>

        $(document).ready(function () {


            var data = [{
                "Id": "SWE",
                "Country": "Sweden",
                "Population": 9592552
            }, {
                "Id": "NOR",
                "Country": "Norway",
                "Population": 5084190
            }];


            function display(e) {
                alert("E" + e);
                var countryData = data.find(function (element, index, array) {
                    return element.Id === e;
                });
                alert(countryData.Population);
            }
            display('SWE');


        });


    </script>
</head>
</html>

The code posted above is working properly on Firefox and Chrome but I get an error in Internet Explorer. Error message:

Object doesn't support property or method 'find'

Temple answered 13/6, 2016 at 11:23 Comment(4)

What version(s) of IE are you testing with? Also, is it in standards mode, compatibility mode or quirks mode? – Epidemic 13/6, 2016 at 11:26

hi @Epidemic i am using IE Version 11.0.9660.18321 – Temple 13/6, 2016 at 11:28

for checking for which browsers support which features, caniuse.com is very helpful, just for future reference. – Wilona 13/6, 2016 at 12:17

developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… – Disproof 14/3, 2017 at 9:10

Here is a work around. You can use filter instead of find; but filter returns an array of matching objects. find only returns the first match inside an array. So, why not use filter as following;

data.filter(function (x) {
         return x.Id === e
    })[0];

Nich answered 19/9, 2018 at 18:41 Comment(3)

Ran into this problem on a project recently and the general consensus was to use @babel/polyfill. Went that route and discovered the polyfill actually created a few odd bugs, so we had to pull it. This solution, however, being highly targeted, solved the problem without any side effects. Simple, clean, straight to the point. Thank you! – Kiser 12/3, 2019 at 1:17

Simplest, cleanest, equivalent work-around for those who need to remain IE11 compatible thanks! – Dendroid 16/5, 2019 at 1:40

the main diff between filter() and find() functions is filter() go through all array and find() just for the first occurrence. This workaround may make some performance issues. – Porscheporsena 27/1, 2020 at 10:5

As mentioned array.find() is not supported in IE.

However you can read about a Polyfill here:

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

This method has been added to the ECMAScript 2015 specification and may not be available in all JavaScript implementations yet. However, you can polyfill Array.prototype.find with the following snippet:

Code:

// https://tc39.github.io/ecma262/#sec-array.prototype.find
if (!Array.prototype.find) {
  Object.defineProperty(Array.prototype, 'find', {
    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 kValue.
        var kValue = o[k];
        if (predicate.call(thisArg, kValue, k, o)) {
          return kValue;
        }
        // e. Increase k by 1.
        k++;
      }

      // 7. Return undefined.
      return undefined;
    }
  });
}

K2 answered 2/11, 2017 at 8:17 Comment(2)

If you vote down please say why. Hard to improve answer otherwise. – K2 25/12, 2021 at 16:26

Still getting syntax error in IE11. – Syndetic 14/6, 2022 at 10:6

You are using the JavaScript array.find() method. Note that this is standard JS, and has nothing to do with jQuery. In fact, your entire code in the question makes no use of jQuery at all.

You can find the documentation for array.find() here: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/find

If you scroll to the bottom of this page, you will note that it has browser support info, and you will see that it states that IE does not support this method.

Ironically, your best way around this would be to use jQuery, which does have similar functionality that is supported in all browsers.

Epidemic answered 13/6, 2016 at 11:30 Comment(3)

A second alternative is to roll your own for-loop, if for some odd reason you aren't allowed to use jQuery – Oud 11/4, 2018 at 18:6

Or just do array.filter()[0] – Firkin 10/5, 2018 at 9:23

lol'd at "Ironically, your best way around this would be to use jQuery" :) – Squatter 27/8, 2018 at 20:31

Array.prototype.find is not supported in any version of IE

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

Manoff answered 13/6, 2016 at 11:29 Comment(2)

And the page provide a useful polyfill – Longterm 13/6, 2016 at 11:31

the Polyfill just works great, it checks if the prototype.find is undefined, and then it defines the property to the Array.prototype: Object.defineProperty(Array.prototype, 'find', { Thanks! – Polyanthus 26/9, 2017 at 16:27

I solved same issue by adding polyfill following:

<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=default,Array.prototype.includes,Array.prototype.find"></script>

A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.

Hope someone find this helpful.

Arroyo answered 3/10, 2019 at 8:4 Comment(0)

Just for the purpose of mentioning underscore's find method works in IE with no problem.

Anamariaanamnesis answered 3/9, 2019 at 17:21 Comment(0)

-1

IE doesn't support Array.prototype.find

If you don't want to add a polyfill though, you can use array.filter(filterFunction)[0] this is a good alternative option:

var idToMatch = 2
var array = [{ id: 1 }, { id: 2 }, { id: 3 } ]

function filterArray (item) {
  return item.id === idToMatch;
}

var matchingObject =
  // vv The important bit vv
  array.filter(filterArray)[0]

Credit goes to Rok Burgar for the idea but he didn't post as an answer, just as a comment.

Frontiersman answered 28/11, 2021 at 6:30 Comment(2)

why the negative?? – Timetable 6/1, 2022 at 0:56

I wish I knew :( – Frontiersman 7/1, 2022 at 1:33

-7

The Array.find method support for Microsoft's browsers started with Edge.

The W3Schools compatibility table states that the support started on version 12, while the Can I Use compatibility table says that the support was unknown between version 12 and 14, being officially supported starting at version 15.

Villagomez answered 13/6, 2016 at 11:31 Comment(1)

IE12 does not exist. The browser you're looking at with the blue 'e' logo is now called Edge, and is significantly different from it's predecessor IE. – Epidemic 13/6, 2016 at 11:32

Recommended topics

Hot tags