Syntax error in filter function using AngularJS/JavaScript

Question

I have an error while using filter method in AngularJS/Javascript. Here is my code:

var temp = [];
$scope.mulImage = $scope.mulImage.filter((x, i) => {
   if(temp.indexOf(x.filename) < 0) {
         temp.push(x.filename);
         return true;
   }
   return false;
})

I am getting the error at first line:

$scope.mulImage=$scope.mulImage.filter((x, i)=> {

It's working in Google Chrome but not in IE or Safari browsers. Why is this so and how can I fix this?

Because IE and Safari haven't implemented ES6 features such as arrow functions? Use a transpiler to transpile to ES5. — Andrew Li, Jan 25 '17 at 05:14
@AndrewLi -- that is an answer not a comment. You should promote it. — Michael Lorton, Jan 25 '17 at 05:15
@AndrewLi : So how can i resolve this for all browser by keeping the output same. — , Jan 25 '17 at 05:17

Andrew Li · Answer 1 · 2017-01-27T03:33:58.320

Problem

This is because of arrow functions, which are a new feature in ECMAScript 2015 (also known as ES6). Since many ES6 features have not been implemented on all browsers, the allowance of new syntax varies across browsers. A few good resources are the compatibility table for ES2015 (ES6) features and the MDN documentation for arrow functions. Both outline what versions of browsers support what.

From the table we observe the following:

Internet Explorer does not support this feature.
Safari >=10 supports this feature.
Chrome >=45 supports this feature.
Firefox >= 22 supports this feature.
Opera >= 32 supports this feature

So, arrow functions in your case did work on Chrome as they were implemented in the version of the browser you were using, but not Safari and IE because they were too old and were at a version that didn't support the feature or just don't support the feature in the first place.

Solutions

You have two options. One is easier and the other requiring a bit more work.

1) Just use function instead. This will require some more work to achieve the arrow function's this behavior but will be easier to use for right now. In this case, the arrow function's this context (or lack thereof) does not matter anyways. Here's an example:

var temp = [];
$scope.mulImage = $scope.mulImage.filter(function(x, i) {
   if(temp.indexOf(x.filename) < 0) {
       temp.push(x.filename);
       return true;
   }
   return false;
})

2) Use something like Babel which is a transpiler. What this means is that it transform the code to a different version. In this case, we can make it so that it transforms your ES6 code with arrow functions into regular ES5 code (the regular JavaScript we know) that is supported by all browsers. You can follow their installation instructions in the link above.

+1 for `1.Just use function instead. This will require some more work to achieve the arrow function's this behavior but will be easier to use for right now.` — Ramesh Rajendran, Jan 25 '17 at 05:35

score 1 · Accepted Answer · edited May 23 '17 at 12:24

1

Arrow functions either allow to use an expression or a block as their body. Passing an expression

In ES5:

try this way

var temp=[];
$scope.mulImage=$scope.mulImage.filter(function(x) {
    if (temp.indexOf(x.filename) < 0) {
         temp.push(x.filename);
         return true;
   }
   return false;
})

Referred from : How to use ES6 Fat Arrow to .filter() an array of objects

edited May 23 '17 at 12:24

Community

1
1

answered Jan 25 '17 at 05:34

Ramesh Rajendran

37,412
45
153
234

Syntax error in filter function using AngularJS/JavaScript

2 Answers2