CODEWITHSUNDEEP
javascriptinternet-explorercompatibility
mechanicious
mechanicious

Reputation: 1616

Object doesn't support property or method 'entries'

I am working with the FormData object, while my code works well on Chrome, Microsoft Edge spits out the following error message Object doesn't support property or method 'entries' – which corresponds to the following code:

for(let pair of formData.entries()) {
  ...
}

I've tried replacing .entries() with .getAll(), however Microsoft Edge doesn't recognize either of both methods.

Is there a way to get this functionality (iterating over FormData files) out of Microsoft Edge?

FormData Microsoft Edge Console Dump

enter image description here

Upvotes: 21

Views: 24447

Answers (4)

Yash Vekaria
Yash Vekaria

Reputation: 2373

By importing

import 'core-js/es7/object';

if you are getting error

Module not found: Error: Can't resolve 'core-js/es7/object'

then Change all "es6" and "es7" to "es" in your imports.

import 'core-js/es/object';

Upvotes: 3

cs_pupil
cs_pupil

Reputation: 3062

2/10/2020 UPDATE: Like @Monomachus said, first try adding this line to polyfill.ts:

import 'core-js/es7/object';

If this fixes it, make sure to give his answer credit! If needed, you can manually define it using the instructions below:

Original Response: Essentially, a polyfill is a way you can manually define a function that isn't natively supported on a specific platform/browser.

In your case, there is a basic definition of the function Object.entries given here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries#Polyfill

They provide this simple, ready to deploy definition:

if (!Object.entries)
  Object.entries = function( obj ){
    var ownProps = Object.keys( obj ),
        i = ownProps.length,
        resArray = new Array(i); // preallocate the Array
    while (i--)
      resArray[i] = [ownProps[i], obj[ownProps[i]]];

    return resArray;
  };

Looking at the code above, the first thing it checks is if Object.entries exists. If it does, no worries, but if it doesn't exist, then it creates it... As long as this function gets defined before you actually call it in your code, you should be fine.

Using something like angular-cli, they provide a polyfills.ts file (which gets executed before your app is run) where you can place code like this or import files containing definitions you'll need.

10/30/2018 UPDATE:

@apsillers correctly pointed out the answer above does not apply to FormData.entries(), but to Object.entries() instead.

Solution for FormData.entries() (this worked for me): https://stackoverflow.com/a/49556416/3806701

Basically, import this poly-fill:

<script src="https://unpkg.com/formdata-polyfill"></script>

Then you can iterate FormData as follows:

var formDataEntries = (<any>formData).entries(), formDataEntry = formDataEntries.next(), pair;
while (!formDataEntry.done) {
    pair = formDataEntry.value;
    console.log(pair[0] + ', ' + pair[1]);
    formDataEntry = formDataEntries.next();
}

Upvotes: 26

Bharath M
Bharath M

Reputation: 21

I have added the below code in my polyfills.ts and it worked for me.

import 'core-js/es7/object';
import 'core-js/es7/array';

if (!Object.entries)
  { Object.entries = function(obj)
        { 
          var ownProps = Object.keys(obj),
          i = ownProps.length,
          resArray = new Array(i); // preallocate the Array while (i--) 
          resArray[i] = [ownProps[i], obj[ownProps[i]]]; 
          return resArray; 
        }; 
  }

Upvotes: 0

Monomachus
Monomachus

Reputation: 1478

If you're in an Angular App please add this line to your polyfills.ts file

import 'core-js/es7/object';

It will import all the new methods on Object, including entries

enter image description here

Upvotes: 23

Related Questions