Implementing Reverse Sorting Feature with a Second Click in JavaScript

Question

Implementing Reverse Sorting Feature with a Second Click in JavaScript

I've implemented a function that successfully sorts a JSON array when a link is clicked (the function is triggered by an onclick event). Here's the current sorting function in action:

function sortArch(a, b) {
    x = eval("a." + sort_type).toLowerCase();  
    y = eval("b." + sort_type).toLowerCase();  
    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}

Now, I want to modify the function so that when the same button is clicked again, it will perform a reverse sort. Reversing the sort order is straightforward:

x = eval("a." + sort_type).toLowerCase();  
y = eval("b." + sort_type).toLowerCase();  
return ((x < y) ? 1 : ((x > y) ? -1 : 0));

However, my challenge lies in ensuring that the function "knows" which way it needs to sort. I've considered using a boolean flag, but haven't been able to find a solution that actually works. I just need a reliable method to keep track of the current sorting direction and then apply the appropriate sorting logic when the button is clicked for the second time. Appreciate any assistance on this matter!

javascript json sorting click reverse

Answer 1

Answer №1

Here is a simple way to achieve this:

function customSort(descending) {
  var modifier = descending ? -1 : 1;
  return function(a, b) {
    var lowerCaseA = a[sort_type].toLowerCase(), 
        lowerCaseB = b[sort_type].toLowerCase();
    return lowerCaseA > lowerCaseB ? 1 * modifier : lowerCaseA < lowerCaseB -1 * modifier : 0;
  }
}

arr.sort(customSort(true)); // sort in descending order
arr.sort(customSort(false)); // sort in ascending order

By the way, it's best to avoid using eval whenever possible as it can slow down and complicate your code.

Answer 2

Here is a simple way to achieve this:

function customSort(descending) {
  var modifier = descending ? -1 : 1;
  return function(a, b) {
    var lowerCaseA = a[sort_type].toLowerCase(), 
        lowerCaseB = b[sort_type].toLowerCase();
    return lowerCaseA > lowerCaseB ? 1 * modifier : lowerCaseA < lowerCaseB -1 * modifier : 0;
  }
}

arr.sort(customSort(true)); // sort in descending order
arr.sort(customSort(false)); // sort in ascending order

By the way, it's best to avoid using eval whenever possible as it can slow down and complicate your code.

Answer 3

Answer №2

Just one more step to go:

function customSort(sortType, isAscending) {
    var direction = isAscending ? 1 : -1;
    return function(valueA, valueB) {
        var x = valueA[sortType].toLowerCase();
        var y = valueB[sortType].toLowerCase();

        return direction * x.localeCompare(y);
    }
}

Here are some examples of how you can use it:

people = [
    {firstName: 'Alice', lastName: 'Smith'},
    {firstName: 'Bob', lastName: 'Johnson'}
];


// Utilize the customSort function in your button click events:
people.sort(customSort('firstName', true));
// or
people.sort(customSort('firstName', false));
// or
people.sort(customSort('lastName', true));
// or
people.sort(customSort('lastName', false));

Cheers to sorting efficiently!

Answer 4

Just one more step to go:

function customSort(sortType, isAscending) {
    var direction = isAscending ? 1 : -1;
    return function(valueA, valueB) {
        var x = valueA[sortType].toLowerCase();
        var y = valueB[sortType].toLowerCase();

        return direction * x.localeCompare(y);
    }
}

Here are some examples of how you can use it:

people = [
    {firstName: 'Alice', lastName: 'Smith'},
    {firstName: 'Bob', lastName: 'Johnson'}
];


// Utilize the customSort function in your button click events:
people.sort(customSort('firstName', true));
// or
people.sort(customSort('firstName', false));
// or
people.sort(customSort('lastName', true));
// or
people.sort(customSort('lastName', false));

Cheers to sorting efficiently!

Answer 5

Answer №3

Your suggestion to utilize a boolean flag is highly recommended:

function arrange(inverted){
  if(inverted){
    //inverted sort code
  }else{
    //regular sort code
  }
}

button.onclick = function(){arrange(true);}; //or utilize addEventListener

This approach also facilitates a sort() class, which automatically performs a regular sort since undefined is considered "falsy".

Answer 6

Your suggestion to utilize a boolean flag is highly recommended:

function arrange(inverted){
  if(inverted){
    //inverted sort code
  }else{
    //regular sort code
  }
}

button.onclick = function(){arrange(true);}; //or utilize addEventListener

This approach also facilitates a sort() class, which automatically performs a regular sort since undefined is considered "falsy".

Implementing Reverse Sorting Feature with a Second Click in JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Invoke the function defined within a modal when dismissing a ui-bootstrap modal

Adjust the image size without losing sharpness

Issue with Phong material not responding to area light in a three.js.obj model

Navigating the loading of information with fetch and React Hooks

Click on the marker to adjust the map's central position

How can I dynamically update the value of an ng-option based on the selection of another ng-option?

What is the process of deserializing this?

Issue with Laravel 5.4: AJAX behaving unexpectedly and not returning errors as it should

Update the JSON data label

In Python, when using the json.loads function, you may encounter a <class 'exceptions.ValueError'> error message like this: "Expecting property name: line 1 column 3 (char 2

What is the most effective way to use checkboxes to apply multiple filters to an array of objects?

Angular API data causing an undefined error in the template

The TextArea element is experiencing issues with the Jquery function

Customize Material-UI icons dynamically by changing their props in an array

Creating a GWT-compatible solution for implementing the Google Visualization - Annotation Chart

What is the alternative method to obtain dynamically added options without relying on the on change or onclick event?

Creating multiple div elements with changing content dynamically

Node.js poses a challenge when it comes to decoding incoming request data

Navigating the loop in Vue using JavaScript

The error message "There is no defined window.matchMedia prefers-color-scheme window in Next.js"