Object.entries() alternative for Internet Explorer and ReactJS

Question

Well, I've been building a web application for a couple weeks now, and everything good. I got to the part that I had to test in Internet Explorer, and of all of the things that came up (all fixed except for one), Object.entries() is not supported.

I've been doing some research and try to come up with a simple alternative, but no luck at all.

To be more specific, I'm bringing an object from an API, to fill options for <select></select> fields I have to filter some information, just like this:

Object.entries(this.state.filterInfo.sectorId).map(this.eachOption)

// Function
eachOption = ([key, val], i) => {
    return(
        <option value={val} key={i}>{val}</option>
    );
}

So everything works correctly except for Internet Explorer. The thing is that in this particular component I'm rendering over 30 <select></select> fields. IF there is a solution that doesn't require me to rebuild everything, it would be amazing.

Is there a simple solution? A way around this?

Thanks in advance.

Answer 1

The usual first item to research when you want to use a newer API in an older browser is whether there is a simple polyfill. And, sure enough there is a pretty simple polyfill for Object.entries() shown on the MDN doc site:

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;
  };