Im trying to fix a function i built using 'forEach' which is not patible with a web browser that should be obsolete (IE). I did this in Javascript. I tried converting it to a for loop, but was unsuccessful. If someone could help me convert the two functions by getting rid of the foreach and using for loop I would greatly appreciate any help.

Here are the two arrays they reference.

var yr1 = 2011, yr2 = 2012, yr3 = 2013, yr4 = 2014;
var years = [yr1, yr2, yr3, yr4];
//array with months and associated days
var calendar = [
    ["January", 31],["February", 28],["March", 31],["April", 30],["May", 31],["June", 30],["July", 31],["August", 31],["September", 30],
    ["October", 31],["November", 30],["December", 31]];

And here are the functions that need to be changed from forEach to for loops.

    //this creates the month values
function generateMonths() {
    var df = document.createDocumentFragment();
    calendar.forEach(function(info, i) {
        df.appendChild(createOption(info[0], i));
    });
        //clears past months
    clearChildren(sel_month);
        //appends new months onto variable df
    sel_month.appendChild(df);
}
//this creates the year values
function generateYears() {
    var df = document.createDocumentFragment();
    years.forEach(function(i) {
        df.appendChild(createYearOption(i));
    });
    //clears past months
    clearChildren(sel_year);
    //appends new months onto variable df
    sel_year.appendChild(df);
}

And here are my failed attempts to prove I tried.

    //this creates the month values
function generateMonths() {
    var df = document.createDocumentFragment();
        for (var w = 0; w < 12; w++) {
            (function(calendar, w) {
                df.appendChild(createOption(calendar[0], w));
            });
        }
    //calendar.forEach(function(info, i) {
        //df.appendChild(createOption(info[0], i));
    };
        //clears past months
    clearChildren(sel_month);
        //appends new months onto variable df
    sel_month.appendChild(df);
}
    //this creates the year values
    function generateYears() {
    var df = document.createDocumentFragment();
        for (var w = 0; w < 12; w++) {
            (function(years) {
                df.appendChild(createOption(years[0]));
            });
        }        

        //years.forEach(function(i) {
        //df.appendChild(createYearOption(i));
    };
        //clears past months
    clearChildren(sel_year);
        //appends new months onto variable df
    sel_year.appendChild(df);
}

Im trying to fix a function i built using 'forEach' which is not patible with a web browser that should be obsolete (IE). I did this in Javascript. I tried converting it to a for loop, but was unsuccessful. If someone could help me convert the two functions by getting rid of the foreach and using for loop I would greatly appreciate any help.

Here are the two arrays they reference.

var yr1 = 2011, yr2 = 2012, yr3 = 2013, yr4 = 2014;
var years = [yr1, yr2, yr3, yr4];
//array with months and associated days
var calendar = [
    ["January", 31],["February", 28],["March", 31],["April", 30],["May", 31],["June", 30],["July", 31],["August", 31],["September", 30],
    ["October", 31],["November", 30],["December", 31]];

And here are the functions that need to be changed from forEach to for loops.

    //this creates the month values
function generateMonths() {
    var df = document.createDocumentFragment();
    calendar.forEach(function(info, i) {
        df.appendChild(createOption(info[0], i));
    });
        //clears past months
    clearChildren(sel_month);
        //appends new months onto variable df
    sel_month.appendChild(df);
}
//this creates the year values
function generateYears() {
    var df = document.createDocumentFragment();
    years.forEach(function(i) {
        df.appendChild(createYearOption(i));
    });
    //clears past months
    clearChildren(sel_year);
    //appends new months onto variable df
    sel_year.appendChild(df);
}

And here are my failed attempts to prove I tried.

    //this creates the month values
function generateMonths() {
    var df = document.createDocumentFragment();
        for (var w = 0; w < 12; w++) {
            (function(calendar, w) {
                df.appendChild(createOption(calendar[0], w));
            });
        }
    //calendar.forEach(function(info, i) {
        //df.appendChild(createOption(info[0], i));
    };
        //clears past months
    clearChildren(sel_month);
        //appends new months onto variable df
    sel_month.appendChild(df);
}
    //this creates the year values
    function generateYears() {
    var df = document.createDocumentFragment();
        for (var w = 0; w < 12; w++) {
            (function(years) {
                df.appendChild(createOption(years[0]));
            });
        }        

        //years.forEach(function(i) {
        //df.appendChild(createYearOption(i));
    };
        //clears past months
    clearChildren(sel_year);
        //appends new months onto variable df
    sel_year.appendChild(df);
}

• javascript
• function
• loops
• for-loop
• foreach

2 Answers 2

var years = [yr1, yr2, yr3, yr4];

years.forEach(function(i) {
    df.appendChild(createYearOption(i));
});

Is equivalent to:

for(var i=0; i<years.length; i++) {
  df.appendChild(createYearOption(years[i]));
}

I'm not sure what your forEach is accepting in your second situation. But I think this is what you're trying to do:

var calendar = [["January", 31],["February", 28]];

calendar.forEach(function(info, i) {
    df.appendChild(createOption(info[0], i));
});

Instead use a loop to createOption with both elements of each array.

for(var i=0; i<calendar.length; i++) {
  df.appendChild(createOption(calendar[i][0], calendar[i][1]));
}

You could always shim forEach if you wanted. From MDN:

if ( !Array.prototype.forEach ) {
  Array.prototype.forEach = function(fn, scope) {
    for(var i = 0, len = this.length; i < len; ++i) {
      fn.call(scope || this, this[i], i, this);
    }
  }
}