Generating a string indicating the range of days chosen

Question

Generating a string indicating the range of days chosen

Imagine a scenario where there is a selection of days available to the user (they can choose multiple).

The list includes Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, and Saturday, each with an associated number from 0 to 6. For instance, Sunday corresponds to 0 and Saturday to 6:

vm.weekDays = [
    {name: 'Sunday', number: 0},
    {name: 'Monday', number: 1},
    {name: 'Tuesday', number: 2},
    {name: 'Wednesday', number: 3},
    {name: 'Thursday', number: 4},
    {name: 'Friday', number: 5},
    {name: 'Saturday', number: 6},
]

If the user selects Sunday, Monday, and Tuesday, the output should be "Sunday - Tuesday". However, if they select Sunday, Monday, Tuesday, and Thursday, it should display as "Sunday - Tuesday, Thursday". Finally, choosing Sunday, Tuesday, and Thursday should show exactly those selected days.

To store these selections and display them accordingly, I am saving the strings in an array. Here is what I have implemented so far:

function test() {

    vm.display = [];

    var sortedWeekdays = _.sortBy(vm.sWeekDays, 'number');

    var start = 0;
    var end = 0;

    if(sortedWeekdays.length > 1){
        for(var i=0; i <= sortedWeekdays.length-2; i++){
            if(sortedWeekdays[i].number + 1 != sortedWeekdays[i+1].number) {
                start = i + 1;
                end = i;
                vm.display.push(sortedWeekdays[i].name);
            }
            end = i + 1;
        }

        vm.display.push(sortedWeekdays[start].name + " - " + sortedWeekdays[end].name);
    } else {
        vm.display.push(sortedWeekdays[0].name);
    }
}

Currently, the function successfully displays consecutive days, but selecting Sunday through Tuesday and Thursday does not yield the desired outcome.

If you have any suggestions or solutions, your assistance would be highly appreciated.

javascript angularjs string for-loop weekday

Answer 1

Answer №1

I made some adjustments to your code and I believe the solution is now easy to understand. Here is my revised implementation

 var vm = {};
 vm.weekDays = [{
     name: 'Sunday',
     number: 0
 }, {
     name: 'Monday',
     number: 1
 }, {
     name: 'Tuesday',
     number: 2
 }, {
     name: 'Wednesday',
     number: 3
 }, {
     name: 'Thursday',
     number: 4
 }, {
     name: 'Friday',
     number: 5
 }, {
     name: 'Saturday',
     number: 6
 }, ]

 function formatSelected(selected) {
     vm.display = [];
     selected = _.sortBy(selected, 'number'); //this could be vm.selected instead of passing it as a parameter

     var lastnumber = 0,
         template = {
             name: '',
             number: 0
         },
         last,
         list = [];

     if (selected.length > 0) {
        last = selected[0];
        for (var i = 0; i < selected.length; i++) {
            if (last) {
                var left = selected[i - 1] ? selected[i - 1] : angular.copy(template);
                console.log(selected[i].number - left.number)

                if (i > 0 && selected[i].number - left.number > 1) {
                    list.push(((left.name != last.name) ? (last.name + '-') : '') + left.name);
                    last = selected[i];
                }
                if((i == (selected.length - 1))) {
                    list.push(((selected[i].name != last.name) ? (last.name + '-') : '') + selected[i].name);
                }
            } else {
                last = selected[i];
            }
        }
    }

     vm.display = list;
 };

You can use the function by passing an array as shown below:

 formatSelected([{
     name: 'Sunday',
     number: 0
 }, {
     name: 'Monday',
     number: 1
 }, {
     name: 'Tuesday',
     number: 2
 }, {
     name: 'Wednesday',
     number: 3
 }, {
     name: 'Saturday',
     number: 6
 }, ]);

I have also updated the function to handle arrays like this:

formatSelected([{ name: 'Sunday', number: 0}, { name: 'Tuesday', number: 2}, { name: 'Thursday', number: 4}]);

Answer 2

I made some adjustments to your code and I believe the solution is now easy to understand. Here is my revised implementation

 var vm = {};
 vm.weekDays = [{
     name: 'Sunday',
     number: 0
 }, {
     name: 'Monday',
     number: 1
 }, {
     name: 'Tuesday',
     number: 2
 }, {
     name: 'Wednesday',
     number: 3
 }, {
     name: 'Thursday',
     number: 4
 }, {
     name: 'Friday',
     number: 5
 }, {
     name: 'Saturday',
     number: 6
 }, ]

 function formatSelected(selected) {
     vm.display = [];
     selected = _.sortBy(selected, 'number'); //this could be vm.selected instead of passing it as a parameter

     var lastnumber = 0,
         template = {
             name: '',
             number: 0
         },
         last,
         list = [];

     if (selected.length > 0) {
        last = selected[0];
        for (var i = 0; i < selected.length; i++) {
            if (last) {
                var left = selected[i - 1] ? selected[i - 1] : angular.copy(template);
                console.log(selected[i].number - left.number)

                if (i > 0 && selected[i].number - left.number > 1) {
                    list.push(((left.name != last.name) ? (last.name + '-') : '') + left.name);
                    last = selected[i];
                }
                if((i == (selected.length - 1))) {
                    list.push(((selected[i].name != last.name) ? (last.name + '-') : '') + selected[i].name);
                }
            } else {
                last = selected[i];
            }
        }
    }

     vm.display = list;
 };

You can use the function by passing an array as shown below:

 formatSelected([{
     name: 'Sunday',
     number: 0
 }, {
     name: 'Monday',
     number: 1
 }, {
     name: 'Tuesday',
     number: 2
 }, {
     name: 'Wednesday',
     number: 3
 }, {
     name: 'Saturday',
     number: 6
 }, ]);

I have also updated the function to handle arrays like this:

formatSelected([{ name: 'Sunday', number: 0}, { name: 'Tuesday', number: 2}, { name: 'Thursday', number: 4}]);

Answer 3

Answer №2

One way to tackle this problem is by using a map to store the range, and then parsing the map to create the resulting string.

// Here is an example of the map structure 
[
    [{
        name: 'Sun',
        number: 0
    }, {
        name: 'Mon',
        number: 1
    }, {
        name: 'Tue',
        number: 2
    }],
    [{
        name: 'Thu',
        number: 4
    }]
]

Next step involves checking each range to determine if it should be converted to 'day1 - day3' or 'day1, day2'.

For a live example, you can visit this JSFiddle link

Answer 4

One way to tackle this problem is by using a map to store the range, and then parsing the map to create the resulting string.

// Here is an example of the map structure 
[
    [{
        name: 'Sun',
        number: 0
    }, {
        name: 'Mon',
        number: 1
    }, {
        name: 'Tue',
        number: 2
    }],
    [{
        name: 'Thu',
        number: 4
    }]
]

Next step involves checking each range to determine if it should be converted to 'day1 - day3' or 'day1, day2'.

For a live example, you can visit this JSFiddle link

Generating a string indicating the range of days chosen

Answer №1

Answer №2

Similar questions

After being redrawn, the line on the canvas vanishes

What methods can users employ to effectively manage and maintain their in-app purchases using my application?

Collaborate and reuse Typescript code across various Node projects

To achieve the desired format, where should I press or manipulate the information?

Unable to launch the Express application on a 64-bit Windows 7 operating system

'view' is not recognized as a valid property of the 'div' element in Ionic3, so it cannot be bound

Retrieve information from an array of objects by utilizing a separate array

Using Jquery's getJson method, we can easily fetch and retrieve the appropriate JSON string by

Unable to locate image in React framework

Exploring the Power of Constants in Karma and Jasmine for Enhanced Performance

How to use the route.navigate() method in Angular 9 to open a URL in a new tab with a query string

The initial component update

The data that has been retrieved is not currently displayed within the Vue table

The redirection from Azure AD SSO is not working properly following a logout

Submitting a Complex JSON Object through a URL with Javascript

Angular - Implement $sanitize for all user inputs

Is it possible to preserve the numerical type of a percentage when applying number formatting?

Creating visually appealing Highcharts.js visualizations for both mobile and desktop devices

Activate the date-picker view when the custom button is clicked

Unpacking the information in React