Sorting function is not working as expected

Issue

I have an array of object, which is actually getting fetched from backend, now I’m mapping data and want to sort it in ascending and descending order on click of a button, so I made a onSort function, but it is not working as I expected, as, uppercase and lowercase problem is there, even being alphabetically in between, lowercase are getting shown at the end, numbers are not getting sorted, and there is another column which shows the amount like ‘$100’, but due to that dollar sign, function takes it as a string and sort it.

this is like

$110, $12, $24000, $2500, $3

it should be like

$3, $12, $110, $2500, $24000

for column with upper and lowercase elements its like, in ascending order –

Apple
Banana,
Dog,
ant,
candy

where is should be like –

ant, Apple, Banana, candy, Dog

In case of numbers its like – 112,12,141,21,32,345,35;

where it should be like – 12,21,32,35,112,141,345;

here the code snippets I used,

const [sort, setSort] = usestate("asc")
const onSort = (obj: string) => {
    
    if (sort === "asc") {
      const tableEl= [...tstate.tableItem].sort((a: any, b: any) => {
        if (a[obj].split('/').reverse().join() > b[obj].split('/').reverse().join()) return 1;
        else if (b[obj].split('/').reverse().join() > a[obj].split('/').reverse().join()) return -1;
        else return 0;
        // return a[obj] > b[obj] ? 1 : -1;
      });
      setTableState({
        ...tstate,
        tableItem: tableEl,
      });
      setSort("dsc")
    }
    if (sort === "dsc") {
      const tableEl= [...tstate.tableItem].sort((a: any, b: any) => {
        if (b[obj].split('/').reverse().join() > a[obj].split('/').reverse().join()) return 1;
        else if (a[obj].split('/').reverse().join() > b[obj].split('/').reverse().join()) return -1;
        else return 0;
        // return b[obj] > a[obj] ? 1 : -1;
      });
      setTableState({
        ...tstate,
        tableItem: tableEl,
      });
      setSort("asc")
    }
  };

Solution

Use localCompare method to check for case sensitivity. Since you want to check for the numbers use isNaN method.

function compare(a, b) {
    if ( isNaN(Number(a) || isNaN(Number(b) )) {
        return b.localeCompare(a)
    } else {
        if (Number(a)>Number(b)) return 1
        else if (Number(a)<Number(b)) return -1
        else return 0
    }
}

Now use this function in the sort method

[...tstate.tableItem].sort(compare)

Answered By – Prana

Answer Checked By – Cary Denson (AngularFixing Admin)