Javascript refactoring similar variables into a forloop

Question

I am trying to simplify code where I define a lot of variables which have a similar structure. ie:

To be simplified:

var monthActual = document.createElement('input');
monthActual.name = "monthActual_" + showrooms[i];
monthActual.value = monthActualData;
fullForm.appendChild(monthActual);

var monthTarget = document.createElement('input');
monthTarget.name = "monthTarget_" + showrooms[i];
monthTarget.value = monthTargetData;
fullForm.appendChild(monthTarget);

var priorYear = document.createElement('input');
priorYear.name = "priorYear_" + showrooms[i];
priorYear.value = priorYearData;
fullForm.appendChild(priorYear);

var priorYearToDate = document.createElement('input');
priorYearToDate.name = "priorYearToDate_" + showrooms[i];
priorYearToDate.value = priorYearToDateData;
fullForm.appendChild(priorYearToDate);

var yearToDateTarget = document.createElement('input');
yearToDateTarget.name = "yearToDateTarget_" + showrooms[i];
yearToDateTarget.value = yearToDateTargetData;
fullForm.appendChild(yearToDateTarget);

var yearToDateActual = document.createElement('input');
yearToDateActual.name = "yearToDateActual_" + showrooms[i];
yearToDateActual.value = yearToDateActualData;
fullForm.appendChild(yearToDateActual);

var YTDVsPYTDSalesCurrency = document.createElement('input');
YTDVsPYTDSalesCurrency.name = "YTDVsPYTDSalesCurrency_" + showrooms[i];
YTDVsPYTDSalesCurrency.value = YTDVsPYTDSalesCurrencyData;
fullForm.appendChild(YTDVsPYTDSalesCurrency);

var YTDVsPYTDSalesinPercent = document.createElement('input');
YTDVsPYTDSalesinPercent.name = "YTDVsPYTDSalesinPercent_" + showrooms[i];
YTDVsPYTDSalesinPercent.value = YTDVsPYTDSalesinPercentData;
fullForm.appendChild(YTDVsPYTDSalesinPercent);

var YTDVsYTDTargetinSalesCurrency = document.createElement('input');
YTDVsYTDTargetinSalesCurrency.name = "YTDVsYTDTargetinSalesCurrency_" + showrooms[i];
YTDVsYTDTargetinSalesCurrency.value = YTDVsYTDTargetinSalesCurrencyData;
fullForm.appendChild(YTDVsYTDTargetinSalesCurrency);

var YTDVsYTDTargetinPercent = document.createElement('input');
YTDVsYTDTargetinPercent.name = "YTDVsYTDTargetinPercent_" + showrooms[i];
YTDVsYTDTargetinPercent.value = YTDVsYTDTargetinPercentData;
fullForm.appendChild(YTDVsYTDTargetinPercent);

I've tried to simplify it by putting the variables into an array then iterating through them like so:

Attempted simplify:

var tableColumnData = ['monthActual', 'monthTarget', 'priorYear', 'priorYearToDate', 'yearToDateTarget',
    'yearToDateActual', 'YTDVsPYTDSalesCurrency', 'YTDVsPYTDSalesinPercent', 'YTDVsYTDTargetinSalesCurrency', 'YTDVsYTDTargetinPercent'];

for(var j=0; j<tableColumnData.length; j++){
    var temp = document.createElement('input');
    temp.name = tableColumnData[j]+ "_" + showrooms[i];
    temp.value = (tableColumnData[j] +"Data");
    fullForm.appendChild(temp);
}

This is however only giving me the string value of the literal string: tableColumnData[j] +"Data" when I am trying to point towards the variable of the same name. I am not sure how to use the variable of the same name.

Full code:

var fullForm = document.createElement('form');
fullForm.action = '/fpdf/requests/print_fullreport.php?year=' + requestYear + '&month=' + getMonth(requestMonth);
fullForm.id = 'fullForm';
fullForm.target = '_blank';
fullForm.method = 'post';

var showrooms = [1, 3, 4, 24, 27, 29, 34, 36, 37, 8, 21, 25, 26, 28, 31, 33, -1];

for (var i = 0; i <showrooms.length; i++){
    var showroomData = allTargetsData.monthlyDetail[showrooms[i]];

    var currencyData = showroomData.currency;
    var showroomname = showroomData.showroom_name;

    var monthActualData = showroomData.total;
    var monthTargetData = Math.round(allTargetsData.originalTarget[requestYear][showrooms[i]][requestMonth]['amount']);
    var priorYearData = allTargetsData.realFigure[requestYear - 1][showrooms[i]]['figures'][requestMonth];
    var priorYearToDateData = showroomData.ly_ytd;
    var yearToDateTargetData = Math.round(showroomData.ytd_target);
    var yearToDateActualData = showroomData.ytd;

    var calculation1 = (showroomData.ytd - showroomData.ly_ytd).toFixed(2);
    var YTDVsPYTDSalesCurrencyData = calculation1;
    var calculation2 = (parseFloat(showroomData.ytd - showroomData.ly_ytd)/showroomData.ly_ytd).toFixed(2);
    var YTDVsPYTDSalesinPercentData = (calculation2*100);
    if (isNaN(YTDVsPYTDSalesinPercentData) || YTDVsPYTDSalesinPercentData == "Infinity"){
        YTDVsPYTDSalesinPercentData = 0;
    }
    var calculation3 = (showroomData.ytd - showroomData.ytd_target).toFixed(2);
    var YTDVsYTDTargetinSalesCurrencyData = (calculation3*100)/100;
    var calculation4 = (parseFloat(showroomData.ytd - showroomData.ytd_target)/parseFloat(showroomData.ytd_target)).toFixed(2);
    var YTDVsYTDTargetinPercentData = calculation4*100;
    if (isNaN(YTDVsYTDTargetinPercentData) || YTDVsYTDTargetinPercentData == "Infinity"){
        YTDVsYTDTargetinPercentData = 0;
    }


    var showroomCurrency = document.createElement('input');
    showroomCurrency.name = "showroomCurrency_" + showrooms[i];
    showroomCurrency.value = currencyData;
    fullForm.appendChild(showroomCurrency);

    var showroomNameField = document.createElement('input');
    showroomNameField.name = "showroomname_" + showrooms[i];
    showroomNameField.value = showroomname;
    fullForm.appendChild(showroomNameField);

    var tableColumnData = ['monthActual', 'monthTarget', 'priorYear', 'priorYearToDate', 'yearToDateTarget',
        'yearToDateActual', 'YTDVsPYTDSalesCurrency', 'YTDVsPYTDSalesinPercent', 'YTDVsYTDTargetinSalesCurrency', 'YTDVsYTDTargetinPercent'];

    for(var j=0; j<tableColumnData.length; j++){
        var temp = document.createElement('input');
        temp.name = tableColumnData[j]+ "_" + showrooms[i];
        temp.value = (tableColumnData[j] +"Data");
        fullForm.appendChild(temp);
    }
 }

Answer 1

You were really close, but just needed to take the next step. You need to store your variables in an array or an object so that you can dynamically reference them, rather than through literals.

In this example, I took your code and put all of the extra data into the otherData object. That allows you to give them human readable names, but also be able to use the square bracket notation to look up the property. ie otherData.monthActualData == otherData["monthActualData"] .

No promises on whether or not I did this perfectly, but the concept is still there.

 var fullForm = document.createElement('form'); fullForm.action = '/fpdf/requests/print_fullreport.php?year=' + requestYear + '&month=' + getMonth(requestMonth); fullForm.id = 'fullForm'; fullForm.target = '_blank'; fullForm.method = 'post'; var showrooms = [1, 3, 4, 24, 27, 29, 34, 36, 37, 8, 21, 25, 26, 28, 31, 33, -1]; for (var i = 0; i <showrooms.length; i++){ var showroomData = allTargetsData.monthlyDetail[showrooms[i]]; var currencyData = showroomData.currency; var showroomname = showroomData.showroom_name; var otherData = {}; otherData.monthActualData = showroomData.total; otherData.monthTargetData = Math.round(allTargetsData.originalTarget[requestYear][showrooms[i]][requestMonth]['amount']); otherData.priorYearData = allTargetsData.realFigure[requestYear - 1][showrooms[i]]['figures'][requestMonth]; otherData.priorYearToDateData = showroomData.ly_ytd; otherData.yearToDateTargetData = Math.round(showroomData.ytd_target); otherData.yearToDateActualData = showroomData.ytd; var calculation1 = (showroomData.ytd - showroomData.ly_ytd).toFixed(2); otherData.YTDVsPYTDSalesCurrencyData = calculation1; var calculation2 = (parseFloat(showroomData.ytd - showroomData.ly_ytd)/showroomData.ly_ytd).toFixed(2); otherData.YTDVsPYTDSalesinPercentData = (calculation2*100); if (isNaN(otherData.YTDVsPYTDSalesinPercentData) || otherData.YTDVsPYTDSalesinPercentData == "Infinity"){ otherData.YTDVsPYTDSalesinPercentData = 0; } var calculation3 = (showroomData.ytd - showroomData.ytd_target).toFixed(2); otherData.YTDVsYTDTargetinSalesCurrencyData = (calculation3*100)/100; var calculation4 = (parseFloat(showroomData.ytd - showroomData.ytd_target)/parseFloat(showroomData.ytd_target)).toFixed(2); otherData.YTDVsYTDTargetinPercentData = calculation4*100; if (isNaN(otherData.YTDVsYTDTargetinPercentData) || otherData.YTDVsYTDTargetinPercentData == "Infinity"){ otherData.YTDVsYTDTargetinPercentData = 0; } var showroomCurrency = document.createElement('input'); showroomCurrency.name = "showroomCurrency_" + showrooms[i]; showroomCurrency.value = currencyData; fullForm.appendChild(showroomCurrency); var showroomNameField = document.createElement('input'); showroomNameField.name = "showroomname_" + showrooms[i]; showroomNameField.value = showroomname; fullForm.appendChild(showroomNameField); var tableColumnData = ['monthActual', 'monthTarget', 'priorYear', 'priorYearToDate', 'yearToDateTarget', 'yearToDateActual', 'YTDVsPYTDSalesCurrency', 'YTDVsPYTDSalesinPercent', 'YTDVsYTDTargetinSalesCurrency', 'YTDVsYTDTargetinPercent']; for(var j=0; j<tableColumnData.length; j++){ var temp = document.createElement('input'); temp.name = tableColumnData[j]+ "_" + showrooms[i]; temp.value = otherData[tableColumnData[j] +"Data"]; fullForm.appendChild(temp); } }