The sorting inconsistency within the Javascript Sort function is a known issue

A collection of customer information (Image1 - unsorted) is being displayed in a table format, with the ability for users to sort the table by clicking on the headers. When the user clicks on the Customer Name header for the first time (Image2), the list is sorted alphabetically from A-Z based on the customer names. Clicking on the Customer Name header a second time (Image3) will reverse the order to Z-A.

However, there seems to be an issue when the user clicks on the Customer Name header for the third time (Image4). The expectation was to see the list reordered in its original A-Z order as seen in Image2. Unfortunately, this does not happen and the list remains in an A-Z order, but not the same as previously observed in Images 2 and 3.

if (this.orderByColSide)
   authList.sort((a, b) => a.customerCode.toLowerCase() > b.customerCode.toLowerCase() ? 1 : -1);
else
   authList.sort((a, b) => a.customerCode.toLowerCase() > b.customerCode.toLowerCase() ? -1 : 1);            

https://i.sstatic.net/bnmxS.jpg

https://i.sstatic.net/S5nO8.jpg

https://i.sstatic.net/pvJhb.jpg

https://i.sstatic.net/MXp62.jpg

Answer №1

To compare strings, make use of the localeCompare method

if (this.sortByColumn)
   userList.sort((x, y) => x.username.toLowerCase().localCompare(y.username.toLowerCase())
else
   userList.sort((x, y) => - x.username.toLowerCase().localeCompare(y.username.toLowerCase())

Answer №2

When sorting the authList based on the customer code, the orderByColSide property is checked to determine the direction of the sorting. If true, the list is sorted in ascending order, and if false, it is sorted in descending order.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: You are not able to utilize an import statement outside of a module when utilizing the `fast-image-zoom` feature

Currently, I am attempting to integrate fast-image-zoom into my React/Next.js application and unfortunately encountering an error message that reads: SyntaxError: Cannot use import statement outside a module at Object.compileFunction (node:vm:353:18) ...

Error: The module 'semver' could not be located during the npm installation process

Having trouble with npm install in the NodeJS command prompt. When I run npm install, I encounter the following errors: module.js:339 throw err; ^ Error: Cannot find module 'semver' at Function.Module._resolveFilename (module.js:337: ...

Tips for transmitting HTML as a JSON object through the res.render function in expressjs

My issue involves a JavaScript function that returns an HTML element. I want to pass this element along for users to view as actual HTML, but it ends up appearing as a string with special characters like "<" and ">". For example, "<" appears as (& ...

Tips on keeping Bootstrap Modals out of your browsing history

Imagine this scenario A visitor lands on Page A, clicks through to Page B, and then engages with a link that triggers a modal (code provided below) <a href="mycontent.html" data-target="#modal_xl" data-toggle="modal" data-backdrop="static">Click me ...

What are the best methods for retrieving data from a subcollection in Firebase/Firestore with maximum efficiency

Utilizing Firestore to store posts with simple properties like {title: 'hi', comment: true} has been a seamless process for fetching user-specific data, given the structure of my collection: posts/user.id/post/post.name. An example would be posts ...

Updating the state of an array containing objects within an array of objects in React

I have a state called invoices, which is an array of objects structured like this: const [invoices, setInvoices] = useState([ { id: 123, tag_number: "", item_amounts: [ { item: "processing", amount: 159 }, { i ...

WebStorm not displaying values in AngularJS application

I'm a beginner with WebStorm and AngularJS. I need help understanding why I can't bind data. My goal is to display the value of str, but it always shows {{ str }}. Here's the code snippet: index.html <body ng-app="invoiceApp"> <d ...

Edit the text within an Edge Animate animation by hand directly within the source code

My client is requesting a translation of his website from Spanish to English, which was originally created in Adobe Muse and hosted on Adobe Catalyst. Although I have an Adobe Cloud account, the previous designer is only willing to grant access to a limite ...

Preserve multiple selected values post form submission using PHP, HTML, and JavaScript

How can I retain the selected values in a form after it is submitted? My current code functions correctly when only one value is selected, but does not maintain all selected values when multiple are chosen simultaneously. Any assistance would be apprecia ...

Determine if any words from the user input match any of the prohibited terms in the array

Struggling to solve this problem, I am currently working with jQuery and familiar with the inArray function. However, I seem to be stuck. My objective is to check if any of the words entered by the user in an input field are present in an array, and if so, ...

Go to a different webpage containing HTML and update the image source on that particular page

I am facing an issue with my html page which contains multiple links to another page. I need to dynamically change the image references on the landing page based on the link the user clicks. The challenge here is that the link is inside an iframe and trigg ...

Incorrect arrangement of divs upon browser launch

Utilizing javascript/jquery, I am arranging a series of divs within a larger div: this.inputArea.append(newItem); In this code snippet, inputArea represents the jquery object of the container div, and newItem refers to the corresponding object of the div ...

What are the steps for integrating a CMS with my unique website design?

Currently, I am in the process of creating a unique website for a client using my own combination of html, css, and JavaScript. There is also a possibility that I may incorporate vueJS into the design. The client has expressed a desire to have the ability ...

Alert Div from Bootstrap fails to appear during the second ajax request if the first ajax request is canceled

I've implemented a dismissible alert in my HTML file that starts off hidden. Here's the code snippet: <div class="alert alert-dismissible" role="alert" id="msgdiv" style="margin-bottom:5px;display: none;"> <button type="button" clas ...

Unable to import TypeScript and Jquery together

Hey there, I'm diving into TypeScript for the first time and could use some assistance from you all. I'm working on creating a module in TypeScript that makes API calls to integrate into my main project. Initially, I was attempting this with GET ...

Utilize absolute positioning within Three.js to ensure that all objects are anchored at the 0,0,0 coordinate point

I am facing an issue where the solutions provided do not seem to work for me as I am new to Three.js. In my scene, I have several objects such as a map with each region represented by a separate object positioned on a plane. Here is an image of my setup: ...

Guide to automating the button click on the Visa exchange rate calculator using Selenium

After reviewing Shawn's code in response to the following inquiry, I decided to add another hidden field named Bank Fee. How can I locate and populate the concealed currency input field on a Visa exchange rate calculator using Selenium? The field I ...

What steps should I take with my Android PWA manifest and service workers?

I created a web application that I want to prompt Android users to download when they visit. To build my service workers and manifest, I utilized PWA Builder which can be found at Now that I have the manifest file ready, should I simply upload it to the r ...

Step-by-step guide for launching a Next.js/Node application

Currently, I am developing a full-stack project utilizing a next.js application for the front-end and a node/express server for the API. The front-end and back-end are running on separate ports. Here is how my application is configured: https://i.stack.im ...

How can we transfer functions between files in JavaScript when creating a service library?

There's a piece of code located in my identity service that I'm working with. export function sumbitLogin(username, password) { console.log(username, password); } I want to simplify the process of accessing services in my components without ...