$.getjson IE-specific error

Question

By using a for-loop to ask the server for several database entries I wrote a piece of code, which works proper good, BUT:

Magically this piece of code doesn´t work on the IE11. For Google Chrome, Firefox, Safari, ..., it works porper good. But unfortunately I need to use IE11. The code doesn´t give an error, but the data returned from the server are not there. Just the last element in the for - loop got transmitted.

By using the IE Network connection representation tool, it can be seen that all requests got sent back, but somehow just the last one is already there. Mabye someone had already this problem and can give me some hints...

function getData(setAddress_Event, liter_hour, Fluid_id, dateArray){
          return $.getJSON(setAddress_Event + liter_hour + Fluid_id + "/" + dateArray).then(function(data){
            return {
              data_list:data
            };
          });
        }

       //get day2day data
        var numPendingResults = dateArray.length;
        //new var declaration --> "let" is only valid inside the for loop!!
        for(let j = 0; j<dateArray.length; j++)
        {
        getData(setAddress_Event(), "liter_hour/", Fluid_id, dateArray[j]).then(function(returndata){
          //received data!
          data_collection[j] = returndata;
          numPendingResults--; // one less to wait for!
          if (!numPendingResults) { // we have everything!
            //console.log(data_collection);
            //function call which sends the data forward
            dataReady(data_collection, data_limit);
          }

the function dataReady, should process the received data, but somehow using IE11, just the last request from the loop is there! Therefor I decided to open a new QUESTION. Maybe there is one genius who can give me some hints...

Answer 1

It's an incompatibility in IE11 with the specification.¹ Unfortunately, let in for loops is incorrectly implemented in IE9-IE11 (and Edge up to and including Edge 13; Edge 14 finally gets it right). In a browser compatible with the ES2015 (aka "ES6") specification, this code should show 1, 2, 3, 4, 5; but on IE11, it shows 6, 6, 6, 6, 6 instead (like it would if we used var).

for (let i = 1; i <= 5; ++i) {
  setTimeout(function() {
    console.log(i);
  }, 0);
}

You have a couple of options:

1. Use one of the other solutions for dealing with closures in loops instead of the let solution.
2. Use let, but inside the loop

Here's #2, which works correctly on IE11:

for (let i = 1; i <= 5; ++i) {
  let inner = i; // Different variable
  setTimeout(function() {
    console.log(inner);
  }, 0);
}

---

¹ Originally I called it a "bug," but it's worth noting that IE11 was released two years prior to the final ES2015 specification, and the exact semantics for let in loops moved around during the specification process, so it could just be that Microsoft jumped the gun and implemented what they thought it was going to be based on current conversations, only to have it change before the final spec came out. It's the danger of implementing too early in the specification process. (That process has, itself, been formalized more in the meantime, to help vendors avoid this kind of thing.)