Jquery - .forEach() not working in IE8

Question

I have created this little interaction for one of the platforms at work - http://jsfiddle.net/S79qp/426/

It works fine in all browsers apart form IE8. When I run the console it seems to be this section that it is having problems with...

Array.prototype.forEach.call(l, function(item) {
        a.push(jQuery(item).text());
   });

Can someone show me an IE8 friendly alternative so I can make it compatible for the versions required?

Solution 1

Use the jQuery.each method:

jQuery.each(l, function(index, item){
  a.push(jQuery(item).text());
});

If the target array is empty from start, you can use the jQuery.map method for this instead:

var a = jQuery.map(l, function(item){
  return jQuery(item).text();
});

Solution 2

If all you want is forEach() in IE8:

if (typeof Array.prototype.forEach != 'function') {
    Array.prototype.forEach = function(callback){
      for (var i = 0; i < this.length; i++){
        callback.apply(this, [this[i], i, this]);
      }
    };
}

This will behave as expected in any browser that doesn't have it built-in.

Solution 3

forEach is not supported in IE 8, instead you can use a regular loop:

for ( var i = 0; i < myArray.length; i++ ) {
   // code
}

Solution 4

Indeed the forEach method is only available from IE9. You should use the jQuery version "each()" in order to offer support to older browsers.

Solution 5

I had the same issue with IE8 and here is how I solved it!

First of all wanted to loop and get data from JSON array object. Take look of original which is working well in Firex, chrome and latest IE but not IE8

            data.children.forEach(function(item) {
              //javascript: console.log(item);
              console.log(data.children);
              attachRel(item, '1' + (data.children.length > 1 ? 1 : 0));
            });

Here is the solution that I developed after a long day of struggle

            $.each(data.children, function () {

                attachRel(this, '1' + (data.children.length > 1 ? 1 : 0));
            });

View more solutions

Comments

[The Mechanic]

why not you use jQuery instead of prototype

[Guffa]

@Sarfaraz: The prototype in this case is not the library, but the keyword in Javascript.

[rickyduck]

@Sarfaraz Also what's wrong with using prototype?

[The Mechanic]

@nickyduck actually am confuse a little bit with prototype and trying to understand prototype

[The Mechanic]

@Gufaa am not understand what are you saying

[Guffa]

@TheMechanic: Sorry, didn't get a notification about your comment as you spelled my name wrong... The prototype in Array.prototype.forEach has nothing to do with the Prototype library, it's a keyword in Javascript.

[Milo-J]

Now the console is saying that it doesn't support index = a.indexOf(current) + 1; if (index < 0 || index >= l.length) { index = 0; @Guffa }

[Guffa]

@Milo-J: Array.indexOf is another method recently added. Use the jQuery.inArray method instead. api.jquery.com/jQuery.inArray

[Milo-J]

I have tried to do it but it will not work. could you please have a look? jsfiddle.net/S79qp/428 @Guffa

[Guffa]

@Milo-J: When you get the text from the element using the text method, you don't get the same thing back as what you put in using the html method, so your code will never find the text in the array.

[deddu]

that l is very confusing.

[Guffa]

@deddu: Perhaps, but I used exactly the same variable name as in the question on purpose.

[Angry 84]

Up voted this as when in comes to a large scale project, some times its easier and safer to help correct the faulty browser instead of trying to correct code which is not actually faulty

[Maxwell175]

It would be better to use polyfill at the link provided. That code has been perfected.

[AymDev]

I found useful your answer but it couldn't work for me (IE11, Windows 10). It says the "object" (a basic array) doesn't handle the forEach method. I tried console.log the typeof of the function and the function itself and it is defined as a function with [native code].