CODEWITHSUNDEEP
javascript
Mike
Mike

Reputation: 801

Spread Operator equivalent in IE - Javascript

I have a javascript function to populate dropdowns for individual table rows like:

$scope.possibleOptions = getUniqueValues($scope.yypeOptions, 'yypeOption')
    .map(function(id) {
            return {
                id: id,
                name: id
            });

function getUniqueValues(array, prop) {
    return [...new Set(array.map(item => item[prop]))];
}

where, $scope.yypeOptions is:

$scope.yypeOptions = [{
    yypeOption: "option1"
}, {
    yypeOption: "option2"
}];

I now have to make it compatible to IE. The spread and => operator is something I have to replace.

Went through this and this link. But I could not get any understanding how to replace the Set inside an Array feature.

Upvotes: 7

Views: 14654

Answers (5)

poke
poke

Reputation: 387697

Your two syntaxes that you are asking about are the fat arrow for arrow functions and the spread operator. You can replace the former with a standard function expression and the latter with iteration using forEach that adds the elements to an array. In addition, you also need a replacement for the Set constructor that initializes it from an iterable. Instead, you need to add the elements one by one.

You can write your function like this. This first adds all values into a set, and then gets the values from the list and back to a new array:

function getUniqueValues(array, prop) {
    // create set
    var set = new Set();
    array.forEach(function (item) {
        set.add(item[prop]);
    });

    // convert set to array
    var result = [];
    set.forEach(function (item) {
        result.push(item);
    });
    return result;
}

Since there is basic support for Set, including forEach, in Internet Explorer 11, you can use this without a polyfill.

Here is an example that runs fine in Internet Explorer 11:

var options = [
    { yypeOption: "option1" },
    { yypeOption: "option2" },
    { yypeOption: "option1" },
    { yypeOption: "option1" },
    { yypeOption: "option3" },
];

function getUniqueValues(array, prop) {
    var set = new Set();
    array.forEach(function (item) {
        set.add(item[prop]);
    });
    var result = [];
    set.forEach(function (item) {
        result.push(item);
    });
    return result;
}

console.log(getUniqueValues(options, 'yypeOption'));

Upvotes: 3

user637563
user637563

Reputation: 346

If you are targeting IE11, since it does not support ES6 features like "=>", you have 2 options:

1) include a polyfill like babeljs so that the ES6 code works in IE11

  • I have not done this previously but I read that this is what polyfills do

OR

2) replace your ES6 code with equivalent ES5 code

Upvotes: 2

Alen.Toma
Alen.Toma

Reputation: 4870

Here is a simple way that could work on IE

data =[{name:"a"}, {name:"a"},{name:"x"}]

function getUniqueValues(array, prop) {
    return array.map(function(item) { return item[prop]; })
    .filter(function (item, index, self){ return self.indexOf(item) === index; }); // distinct
}

console.log(getUniqueValues(data, "name"))

Upvotes: 9

Luan Nico
Luan Nico

Reputation: 5917

The getUniqueValues there is performing two things for you; removing duplicated elements and also cloning the array. However, the map already is a clone of the array, so you just need to remove duplicates; you could use something like this:

function onlyUnique(value, index, self) { 
    return self.indexOf(value) === index;
}

function getUniqueValues(array, prop) {
    function mapper(item) {
        return item[prop];
    }
    return array.map(mapper).filter(onlyUnique);
}

I'd suggest you to take a look at stuff like webpack and babel in order to use the latest JS and also work on IE, by using transpiler and polyfills to generate compatible code ;)

PS. I don't have IE right now to test if filter works, but I'm pretty sure it does; otherwise you could remove duplicates by hand with a plain old for.

Upvotes: 3

emrah
emrah

Reputation: 71

I think The problem is not related with 'map',
actually you should not use spread operator (...) in IE11. you may check it here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Upvotes: 1

Related Questions