patternjavascriptMinor

Rendering three types of events as HTML elements

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

threeeventselementstypesrenderinghtml

Problem

I have to clean up some Javascript and I am trying to figure out a more elegant way to write this code below. It's basically looping through 3 dictionaries with the same loop structure and appending some custom HTML onto a specific div. I wanted to see if there is a way to avoid this repetitive code:

if (dtInt in calendarEventDict) {
    var arrEvents = calendarEventDict[dtInt];
    for (var a = 0; a " + calendarEvent.DisplayName + "");
    }
}
if (dtInt in vacationEvents) {
    var arrEventsV = vacationEvents[dtInt];
    for (var v = 0; v " + vacationEvent.PersonName + "");
    }
}
if (dtInt in travelEvents) {
    var arrEventsV1 = travelEvents[dtInt];
    for (var v1 = 0; v1 " + travelEvent.TravelRequest.Person.LastName + ", " + travelEvent.TravelRequest.Person.FirstName.Substring(0, 1) + " visiting " + travelEvent.TravelRequest.TechnicalCentre.Name + " ");
    }
}

Solution

The simplest refactor would be to simply pull out the common functionality, and pass in the array for each case, as well as a function used to create your div content from the current item in the loop. Assuming dtInt is global:

function checkDtInt(arr, funcToCreateDiv) {    
    if (dtInt in arr) {
        var arrEventsV1 = arr[dtInt];
        for (var v1 = 0; v1 " + item.DisplayName + ""
});

checkDtInt(vacationEvents, function(item) { 
   return "" + item.PersonName + ""
});

checkDtInt(travelEvents, function(item) { 
   return "" + item.TravelRequest.Person.LastName + ", " + item.TravelRequest.Person.FirstName.Substring(0, 1) + " visiting " + item.TravelRequest.TechnicalCentre.Name + " "
});

Code Snippets

function checkDtInt(arr, funcToCreateDiv) {    
    if (dtInt in arr) {
        var arrEventsV1 = arr[dtInt];
        for (var v1 = 0; v1 < arrEventsV1.length; v1++) {
            var travelEvent = arrEventsV1[v1];
            $("#dateCupcake" + i).append(funcToCreateDiv(travelEvent));
        }
    }
 }

checkDtInt(calendarEventDict, function(item) { 
   return "<div  dateId='" + item.Date + "' class='event " + "cal" + item.CalendarId + " " + item.CalendarClassName + "' calendarId='" + item.CalendarId + "' eventDateId='" + item.Id + "' id='" + item.EventId + "'>" + item.DisplayName + "</div>"
});

checkDtInt(vacationEvents, function(item) { 
   return "<div  dateId='" + item.Date + "' class='event " + "cal1 blueAllDay' calendarId='1' eventDateId='" + item.Id + "' id='" + item.EventId + "'><img src='/Content/Images/Icons/pawn_glass_" + item.ApprovalIcon + ".png' />" + item.PersonName + "</div>"
});

checkDtInt(travelEvents, function(item) { 
   return "<div  calendarId='2' dateId='" + item.Date.ToString("MMM dd, yyyy") + "' class='event " + "cal2" + " blueAllDay' calendarId='2' eventDateId='" + item.Id + "' eventId='" + item.TravelRequest.Id + "'><img src='/Content/Images/Icons/user1_earth16.png' />" + item.TravelRequest.Person.LastName + ", " + item.TravelRequest.Person.FirstName.Substring(0, 1) + " visiting " + item.TravelRequest.TechnicalCentre.Name + "</div> "
});

Context

StackExchange Code Review Q#6732, answer score: 2

Revisions (0)

No revisions yet.