Search code examples
javascriptinternet-explorercompatibility

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


Solution

  • 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();
    }