arrow notation not working in internet explorer for data.reduce

Question

I have a code

  data = JSON.parse('<?php echo $monthlyParticipation; ?>'),

  months1 = data.reduce((p,c) => ~p.indexOf(c.months) ? p : p.concat(c.months),[]),

  series = data.reduce((p,c) => { var f = p.find(f => f.name == c.project_title);
                               !!f ? f.data[months1.indexOf(c.months)] = c.amount*1
                                  : p.push({name: c.project_title, id:c.project_title,
                                     data: (new Array(months1.length)).fill(0).map((e,i) => i === months1.indexOf(c.months) ? c.amount*1 : e)});

                          return p; 
                 },[]);

Above is my complete code where I am using arrow notations. The code is working fine in all the browsers excepts IE. When I googled I found that arrow notations do not work in IE.

This is my code https://jsfiddle.net/y1s6pttt/ please check in IE

Can anyone please give a solution for this. Is there any other way to write the code.

Please help!!

_"Can anyone please give a solution for this"_ Erm... Just use a plain old `function() { ... }` O.o — Andreas, May 11 '17 at 12:20
I am new to jquery. This is a code which I found in google. I tried to rewrite but I am unable to convert it to old function. Could you help me — rji rji, May 11 '17 at 12:28
I don't know the right syntax. Could you please write it down the function — rji rji, May 11 '17 at 12:36

score 0 · Answer 1 · answered May 11 '17 at 12:28

0

Internet explorer does not support many ES6 features. But you can still write your code in ES6 and use transpilers like Babel to convert your code to ES5 so that it can run on older browsers.

answered May 11 '17 at 12:28

user93

1,866
5
26
45

MehulJoshi · Accepted Answer · 2017-05-12T07:26:21.213

function newFilledArray(len, val) {
  var rv = new Array(len);
  while (--len >= 0) {
    rv[len] = val;
  }
  return rv;
}
data = JSON.parse('[{"project_ref_id":"479","project_title":"Environment project","estimated_project_cost":"0","amount":"0","months":"Dec-2016"},{"project_ref_id":"479","project_title":"Environment project","estimated_project_cost":"0","amount":"0","months":"Jan-2017"},{"project_ref_id":"479","project_title":"Environment project","estimated_project_cost":"0","amount":"0","months":"Feb-2017"},{"project_ref_id":"479","project_title":"Environment project","estimated_project_cost":"7845963210","amount":"85964710","months":"Mar-2017"},{"project_ref_id":"479","project_title":"Environment project","estimated_project_cost":"0","amount":"0","months":"Apr-2017"},{"project_ref_id":"479","project_title":"Environment project","estimated_project_cost":"0","amount":"0","months":"May-2017"}]'),
  months1 = data.reduce(function(p, c) {
    return ~p.indexOf(c.months) ? p : p.concat(c.months)
  }, []),
  series = data.reduce(function(p, c) {
    var f = undefined;
    console.log(p);
    p.map(function(x) {
      if (x.name == c.project_title) {
        f = x;
      }
    });

    !!f ? f.data[months1.indexOf(c.months)] = c.amount * 1 :
      p.push({
        name: c.project_title,
        id: c.project_title,
        data: (
          Array.apply(null, new Array(months1.length)).map(Number.prototype.valueOf, 0)
          .map(
            function(e, i) {
              return i === months1.indexOf(c.months) ? c.amount * 1 : e
            }
          ))
      });
    return p;
  }, []);
var chart1 = new Highcharts.Chart({
  chart: {
    renderTo: 'container1'
  },
  xAxis: {
    categories: months1,
    title: {
      text: 'Months'
    }
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Rupees'
    }
  },
  title: {
    text: ''
  },
  credits: {
    enabled: false
  },
  plotOptions: {
    series: {
      events: {
        legendItemClick: function(event) {
          var selected = this.index;
          var allSeries = this.chart.series;
          $.each(allSeries, function(index, series) {
            selected == index ? series.show() : series.hide();
          });
          return false;
        }
      }
    }
  },
  series: series,
}, function(chart1) {


  $.each(chart1.series, function(i, serie) {
    var pname = serie.name;
    var pjname = pname.replace(/([~!@#$%^&*()_+=`{}\[\]\|\\:;'<>,.\/? ])+/g, '').replace(/^(-)+|(-)+$/g, '');
    var chartcolor = $('#container1 .highcharts-series-' + i + ' path').attr('stroke');
    if (chartcolor == 'rgba(192,192,192,0.0001)') {
      chartcolor = '#7cb5ec';
    }
    chart1.series[i].graph.attr({
      stroke: chartcolor
    });
    var $customLegend = $('.prj-label1' + pjname).css('background-color', chartcolor);
  });
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

I know that internet explorer does not support arrow functions, but what the solution could be for this — rji rji, May 11 '17 at 12:31
I don't know the right syntax. Could you please write it down the function — rji rji, May 11 '17 at 12:36
Ok thank you. If I try to use it I am getting SCRIPT438: Object doesn't support property or method 'find' — rji rji, May 11 '17 at 13:05
means p is not array, you will have to loop thru object to find value. — MehulJoshi, May 11 '17 at 13:10
Uncaught TypeError: p.indexOf is not a function is the error which I am getting — rji rji, May 11 '17 at 13:21
Please provide pen, that I can edit, I don't know what you're passing as data to var in function. — MehulJoshi, May 11 '17 at 13:35
This is my code https://jsfiddle.net/y1s6pttt/ please check in IE — rji rji, May 12 '17 at 06:11
Hi, this is the link to fiddle, working in ie. https://jsfiddle.net/xfwne0up/ — MehulJoshi, May 12 '17 at 07:27
@rjirji manual hand conversion of ES6 to ES5 is tedious and error prone that is why you should use transpilers like babel — user93, May 12 '17 at 09:51

arrow notation not working in internet explorer for data.reduce

2 Answers2