JavaScript：在循环内优化循环

Question

I'm working with an API and it is spitting data back at me in an odd format. Or it is at least to me. The data is the hours of operation for a store, I want to match them up in the way I need them in the front end (the application is written in Angular, uses two APIs so I need to get the API to work with my logic, I don't want to adapt to their format)

This is the format the data is coming in from the API:

var operatingHoursArray = [
    {Weds: true, End: "17:00", Start: "09:00"},
    {Tue: true, End: "17:00", Start: "09:00"},
    {Thur: true, End: "17:00", Start: "09:00"},
    {Sun: false, End: "", Start: ""},
    {Sat: true, End: "17:00", Start: "09:00"},
    {Mon: true, End: "17:00", Start: "09:00"},
    {Fri: true, End: "17:00", Start: "09:00"}
]

An odd structure IMO, I would have prefered the days of the week to be objects, then the open and closed hours stashed within them. My application (AngularJS) requires the data to be in the following format:

var formattedHours = {
    Sunday: 'Closed',
    Monday: 'Closed',
    Tuesday: 'Closed',
    Wednesday: 'Closed',
    Thursday: 'Closed',
    Friday: 'Closed',
    Saturday: 'Closed'
};

Times defaults to 'Closed', this is the code I am using to match the day of the week with the format I require it in:

var daysOfWeek = [
    { sform: 'Mon', lform: 'Monday' },
    { sform: 'Tue', lform: 'Tuesday' },
    { sform: 'Weds', lform: 'Wednesday' },
    { sform: 'Thur', lform: 'Thursday' },
    { sform: 'Fri', lform: 'Friday' },
    { sform: 'Sat', lform: 'Saturday' },
    { sform: 'Sun', lform: 'Sunday' }
];

// Loop through the operating hours for the dealer
for (var i = operatingHoursArray.length - 1; i >= 0; i--) {
    // Loop through the property names for each day, getting the first property name (the day of week)
    for (property in operatingHoursArray[i]) {
        // Loop through the days of the week
        for (var v = daysOfWeek.length - 1; v >= 0; v--) {
            // If the day of the week (array) matches the property name, get the details
            if(daysOfWeek[v].sform == property && operatingHoursArray[i][property] === true) {
                formattedHours[daysOfWeek[v].lform] = operatingHoursArray[i].Start + ' - ' + operatingHoursArray[i].End;
            }
        };
        break; // Forces loop to stop after first property
    }
};

This is getting really nasty really quick, but with my knowledge (noob level), I'm unsure of how to make this any more efficient. It is working for what I need, but is there a better way to code this? Currently it has to run 49 times in order to check every day of the week. As well, some stores do not provide 7 days of hours, instead only providing the hours they are open for. I can't change the structure of formattedHours because the other API is dependent on that same structure.

Answer 1

Change daysOfWeek to an object:

var daysOfWeek = {
    Mon: "Monday",
    Tue: "Tuesday",
    ...
};

Then you can just access daysOfWeek[property] instead of searching daysOfWeek with a loop.

Answer 2

Start with a hash of short-to-long day names.

var daysOfWeek = {
    'Mon': 'Monday',
    'Tue': 'Tuesday',
    'Weds': 'Wednesday',
    'Thur': 'Thursday',
    'Fri': 'Friday',
    'Sat': 'Saturday',
    'Sun': 'Sunday'
];

for (var i = operatingHoursArray.length - 1; i >= 0; i--) {
    // Loop through the property names for each day, getting the first property name (the day of week)
    for (property in operatingHoursArray[i]) {
        var dow = daysOfWeek[property];
        if(dow && operatingHoursArray[i][property]) {
            formattedHours[dow] = operatingHoursArray[i].Start + ' - ' + operatingHoursArray[i].End;
            break;
        }
    }
}

Answer 3

I'd take your ordered collection and iterate that. For each item, I'd loop the operatingHoursArray until one is found for the current daysOfWeek , then build your string.

Using .forEach() and .every() cleans it up a little. The .every() is used for the inner loop so that we can halt the iteration once the match is found.

var daysOfWeek = [
    { sform: 'Mon', lform: 'Monday' },
    { sform: 'Tue', lform: 'Tuesday' },
    { sform: 'Weds', lform: 'Wednesday' },
    { sform: 'Thur', lform: 'Thursday' },
    { sform: 'Fri', lform: 'Friday' },
    { sform: 'Sat', lform: 'Saturday' },
    { sform: 'Sun', lform: 'Sunday' }
];

daysOfWeek.forEach(function(day) {
    operatingHoursArray.every(function(item) {
         if (item.hasOwnProperty(day.sform)) {
             day.formatted = item.Start + ' - ' + item.End;
             day.start = item.Start;
             day.end = item.End;
             day.open = item[day.sform]
             return false;
         }
    });
});

Notice that I'm adding the formatted string, as well as the original data to your daysOfWeek objects.

This is so that you can keep the order you defined. So now you can look up by index, as well as iterate in a reliable order, which isn't possible when using for-in .