Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Alternative or polyfill for Array.from on the Internet Explorer

I have a problem with my Angular App on the Internet Explorer. It runs everywhere without a problem (Chrome, Mozilla, Edge), but NOT on the IE.

I have analyzed with the Developer Explorer where the error is and it returned that the error occurs on the following line:

myDataSet[index - 1].data = Array.from(tmp);

Where this is the following error message I am getting:

Object does not support property or method from at Anonymous function....(etc.)

What I am doing there is that I have a Set() named tmp which contains the following data:

enter image description here

Afterwards I am simply creating a simple array object from this Set.

How can I solve this problem?

EDIT

Based on the recommendations I have added the following code to my App:

if (!Array.from) {   Array.from = (function () {     var toStr = Object.prototype.toString;     var isCallable = function (fn) {       return typeof fn === 'function' || toStr.call(fn) === '[object Function]';     };     var toInteger = function (value) {       var number = Number(value);       if (isNaN(number)) { return 0; }       if (number === 0 || !isFinite(number)) { return number; }       return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));     };     var maxSafeInteger = Math.pow(2, 53) - 1;     var toLength = function (value) {       var len = toInteger(value);       return Math.min(Math.max(len, 0), maxSafeInteger);     };      // The length property of the from method is 1.     return function from(arrayLike/*, mapFn, thisArg */) {       // 1. Let C be the this value.       var C = this;        // 2. Let items be ToObject(arrayLike).       var items = Object(arrayLike);        // 3. ReturnIfAbrupt(items).       if (arrayLike == null) {         throw new TypeError("Array.from requires an array-like object - not null or undefined");       }        // 4. If mapfn is undefined, then let mapping be false.       var mapFn = arguments.length > 1 ? arguments[1] : void undefined;       var T;       if (typeof mapFn !== 'undefined') {         // 5. else         // 5. a If IsCallable(mapfn) is false, throw a TypeError exception.         if (!isCallable(mapFn)) {           throw new TypeError('Array.from: when provided, the second argument must be a function');         }          // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.         if (arguments.length > 2) {           T = arguments[2];         }       }        // 10. Let lenValue be Get(items, "length").       // 11. Let len be ToLength(lenValue).       var len = toLength(items.length);        // 13. If IsConstructor(C) is true, then       // 13. a. Let A be the result of calling the [[Construct]] internal method of C with an argument list containing the single item len.       // 14. a. Else, Let A be ArrayCreate(len).       var A = isCallable(C) ? Object(new C(len)) : new Array(len);        // 16. Let k be 0.       var k = 0;       // 17. Repeat, while k < len… (also steps a - h)       var kValue;       while (k < len) {         kValue = items[k];         if (mapFn) {           A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);         } else {           A[k] = kValue;         }         k += 1;       }       // 18. Let putStatus be Put(A, "length", len, true).       A.length = len;       // 20. Return A.       return A;     };   }()); } 
like image 563
Robert J. Avatar asked Apr 23 '16 12:04

Robert J.


1 Answers

Array.from not supported in the following document modes: Quirks, Internet Explorer 6 standards, Internet Explorer 7 standards, Internet Explorer 8 standards, Internet Explorer 9 standards, Internet Explorer 10 standards, Internet Explorer 11 standards. Not supported in Windows 8.1 (compatibility reference)

Just add the code below to your page (JS code was copied from developer.mozilla.org). It will emulate an ES6's Array.from method.

Array.from was added to the ECMA-262 standard in the 6th edition; as such it may not be present in other implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of Array.from in implementations that don't natively support it. This algorithm is exactly the one specified in ECMA-262, 6th edition, assuming Object and TypeError have their original values and that callback.call evaluates to the original value of Function.prototype.call. In addition, since true iterables can not be polyfilled, this implementation does not support generic iterables as defined in the 6th edition of ECMA-262.

if (!Array.from) {   Array.from = (function () {     var toStr = Object.prototype.toString;     var isCallable = function (fn) {       return typeof fn === 'function' || toStr.call(fn) === '[object Function]';     };     var toInteger = function (value) {       var number = Number(value);       if (isNaN(number)) { return 0; }       if (number === 0 || !isFinite(number)) { return number; }       return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number));     };     var maxSafeInteger = Math.pow(2, 53) - 1;     var toLength = function (value) {       var len = toInteger(value);       return Math.min(Math.max(len, 0), maxSafeInteger);     };      // The length property of the from method is 1.     return function from(arrayLike/*, mapFn, thisArg */) {       // 1. Let C be the this value.       var C = this;        // 2. Let items be ToObject(arrayLike).       var items = Object(arrayLike);        // 3. ReturnIfAbrupt(items).       if (arrayLike == null) {         throw new TypeError("Array.from requires an array-like object - not null or undefined");       }        // 4. If mapfn is undefined, then let mapping be false.       var mapFn = arguments.length > 1 ? arguments[1] : void undefined;       var T;       if (typeof mapFn !== 'undefined') {         // 5. else         // 5. a If IsCallable(mapfn) is false, throw a TypeError exception.         if (!isCallable(mapFn)) {           throw new TypeError('Array.from: when provided, the second argument must be a function');         }          // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined.         if (arguments.length > 2) {           T = arguments[2];         }       }        // 10. Let lenValue be Get(items, "length").       // 11. Let len be ToLength(lenValue).       var len = toLength(items.length);        // 13. If IsConstructor(C) is true, then       // 13. a. Let A be the result of calling the [[Construct]] internal method of C with an argument list containing the single item len.       // 14. a. Else, Let A be ArrayCreate(len).       var A = isCallable(C) ? Object(new C(len)) : new Array(len);        // 16. Let k be 0.       var k = 0;       // 17. Repeat, while k < len… (also steps a - h)       var kValue;       while (k < len) {         kValue = items[k];         if (mapFn) {           A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k);         } else {           A[k] = kValue;         }         k += 1;       }       // 18. Let putStatus be Put(A, "length", len, true).       A.length = len;       // 20. Return A.       return A;     };   }()); } 
like image 151
Ali Mamedov Avatar answered Oct 09 '22 12:10

Ali Mamedov