"Object doesn't support property or method 'find'" in IE
JavascriptC#Visual StudioInternet ExplorerJavascript Problem Overview
<!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'
Javascript Solutions
Solution 1 - Javascript
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];
Solution 2 - Javascript
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;
}
});
}
Solution 3 - Javascript
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.
Solution 4 - Javascript
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
Solution 5 - Javascript
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.
Solution 6 - Javascript
Just for the purpose of mentioning underscore's find method works in IE with no problem.
Solution 7 - Javascript
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.
Solution 8 - Javascript
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.