In Vue.js, when attempting to arrange an array of objects in descending order based on a specific key (such as "name"), the intention is to prioritize data containing uppercase letters to be displayed

I am struggling to organize an array of objects based on a specific key (name). My goal is to have the data with uppercase letters appear first, but for some reason, it's displaying the lowercase data first. I've been using the lodash method "orderby" to achieve this. The initial array looks like this:

data = [
   {
      "id":"00000000-0000-0000-0000-000000100000",
      "name":"DAS_Name_1",
      "layer":"Raw",
      "securityClass":"Green",
      "domainName":null,
      "domainId":null,
      "isActive":true,
      "isLocked":true,
      "creationDate":"2019-10-09T23:12:34Z",
      "createdByName":"DAS_Actor_User_Name_1",
      "createdById":"User_Id_1"
   },
   {
      "id":"00000000-0000-0000-0000-000000100009",
      "name":"u_123",
      "layer":"Standardized",
      "securityClass":"Green",
      "domainName":null,
      "domainId":null,
      "isActive":true,
      "isLocked":true,
      "creationDate":"2019-10-09T23:12:34Z",
      "createdByName":"DAS_Actor_User_Name_10",
      "createdById":"User_Id_10"
   },
   {
      "id":"00000000-0000-0000-0000-000000100099",
      "name":"Velvetica-123",
      "layer":"Standardized",
      "securityClass":"Red",
      "domainName":null,
      "domainId":null,
      "isActive":false,
      "isLocked":true,
      "creationDate":"2019-10-09T23:12:34Z",
      "createdByName":"DAS_Actor_User_Name_20",
      "createdById":"User_Id_20"
   },
   {
      "id":"00000000-0000-0000-0000-000000100100",
      "name":"test_run-2",
      "layer":"Data_Products",
      "securityClass":"Green",
      "domainName":null,
      "domainId":null,
      "isActive":true,
      "isLocked":true,
      "creationDate":"2019-10-09T23:12:34Z",
      "createdByName":"DAS_Actor_User_Name_1",
      "createdById":"User_Id_1"
   }
]

When attempting to sort the data array utilizing lodash as follows:

data = _.orderBy(data, ["name"], ["desc"]);

The actual outcome turns out to be:

data = [
   {
      "id":"00000000-0000-0000-0000-000000100000",
      "name":"test_run-2",
      "layer":"Raw",
      "securityClass":"Green",
      "domainName":null,
      "domainId":null,
      "isActive":true,
      "isLocked":true,
      "creationDate":"2019-10-09T23:12:34Z",
      "createdByName":"DAS_Actor_User_Name_1",
      "createdById":"User_Id_1"
   },
   {
      "id":"00000000-0000-0000-0000-000000100009",
      "name":"u_123 ",
      "layer":"Standardized",
      "securityClass":"Green",
      "domainName":null,
      "domainId":null,
      "isActive":true,
      "isLocked":true,
      "creationDate":"2019-10-09T23:12:34Z",
      "createdByName":"DAS_Actor_User_Name_10",
      "createdById":"User_Id_10"
   },
   {
      "id":"00000000-0000-0000-0000-000000100099",
      "name":"Velvetica-123",
      "layer":"Standardized",
      "securityClass":"Red",
      "domainName":null,
      "domainId":null,
      "isActive":false,
      "isLocked":true,
      "creationDate":"2019-10-09T23:12:34Z",
      "createdByName":"DAS_Actor_User_Name_20",
      "createdById":"User_Id_20"
   },
   {
      "id":"00000000-0000-0000-0000-000000100100",
      "name":"DAS_Name_1 ",
      "layer":"Data_Products",
      "securityClass":"Green",
      "domainName":null,
      "domainId":null,
      "isActive":true,
      "isLocked":true,
      "creationDate":"2019-10-09T23:12:34Z",
      "createdByName":"DAS_Actor_User_Name_1",
      "createdById":"User_Id_1"
   }
]

This output is not what I expected. Any suggestions on how to resolve this issue?

javascriptsortingvuejs2lodash

Answer №1

One easy way to solve this is with a quick ascending sort.

For example, the ASCII value for "A" is 65 while the ASCII value for "a" is 97.

By doing a simple ascending sort, you can group all uppercase letters at the beginning of the array.

Check out an example here

I hope this explanation helps!

Answer №2

When working with Javascript, it is important to remember that comparing strings using < or > is case-sensitive [source]. This means you can simply utilize Javascript's built-in Array.sort() function for sorting purposes [documentation]:

data.sort(function(a, b) {
  if (a < b) {
    return -1
  }

  if (a > b) {
    return 1
  }

  return 0
})

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

Update input field value with data retrieved via ajax call in AngularJS

My current approach involves using AngularJS directives for Bootstrap in order to create an edit form on a Bootstrap modal when the user clicks on the edit button from a list of items. Here is the code I have implemented: HTML: <div class="modal-heade ...

javascriptajaxangularjstwitter-bootstrap

The array containing numbers or undefined values cannot be assigned to an array containing only numbers

Currently facing an issue with TypeScript and types. I have an array of IDs obtained from checkboxes, which may also be empty. An example of values returned from the submit() function: const responseFromSubmit = { 1: { id: "1", value: "true" }, 2: ...

javascriptarraystypescriptarray.prototype.map

Connect to content on the current page

I am facing an issue where the linked heading of a section on the same page is getting lost under the fixed navigation bar when scrolling down. This problem seems to only occur on desktop view as it works fine on mobile preview. Here is the code I am curre ...

javascripthtmlcss

What is the best way to open a browser window at a quarter of its default size?

Is there a way to open a window at 25% of its default device browser window size? I attempted the code below, which worked. However, it only accepts pixel inputs and not relative % values. This makes it non-scalable across various devices. window.resizeT ...

javascripthtmlcss

Execute function when button is clicked in ExpressJS

I am looking to execute a function on my node server when a button on my website is clicked: What I currently have: Index.html (I have not included the entire content for simplicity) <button id="tv">tv</button> Client.js (Client side) const ...

javascriptnode.jsexpresslistener

Steps to incorporate / insert Angular directive in an application

In my app, the main.js file is located in the root folder. -app |_ routes.js |_ main.js -components |_directives |_abc-directive.js I am trying to figure out how to define a directive that can be accessed from a different folder. This is what I at ...

javascriptangularjs

Highcharts - Troubleshooting the chart reflow feature

Take a look at the fiddle I created. I encountered an issue with the chart width when toggling the sidebar. After seeking help on Stack Overflow from this post, I was able to solve it. Now, I'm facing another bug where adding transitions while togg ...

javascriptjqueryhtmlcsshighcharts

Choose a subclass within a superclass by utilizing the "this" keyword

Whenever a user clicks on the class addMass, I want to add the attribute data-rate to the element with the class currentMass. Since there can be multiple elements with the class addToCart, I need to ensure that the changes are only applied to the one that ...

javascriptjquerythis

Encrypt JavaScript for a jade layout

I need to find a way to successfully pass a .js file to a jade template in order for it to display correctly within an ACE editor. However, I am encountering errors when attempting to render certain files that may contain regex and escaped characters. How ...

javascriptnode.jsexpresspugencode

Implementing NPM commands in Jenkins using shell scripting

Whenever I attempt to run the "npm" command, I encounter a syntax error. Users/Shared/Jenkins/Home/workspace/projectName/npm test ^^^^ SyntaxError: Unexpected identifier This is the Jenkins Build shel ...

javascripttestingjenkinsnpmautomated-tests

Struggling with routing in Node.js while working on REST API development via HTTP

I am facing an issue while trying to complete a MEAN project. The client side is already done, but I am having trouble with the server side when attempting to make a new insertion (which is carried out using HTTP Post). Below, I will demonstrate how I hav ...

javascriptnode.jsmongodb

I am experiencing issues with the rendering of my q-btn elements in Quasar and they are

I recently started using Quasar and encountered an issue with my q-btn component buttons displaying white backgrounds at random, despite having added a background-color in the external stylesheets. Here are some examples of this perplexing problem: The e ...

javascripthtmlvue.jssassquasar-framework

Save the JWT token securely within a closure

Someone mentioned that the recommended way to store JWT tokens is as follows: access_token in the application memory (like closures) refresh_token in cookie entries (HttpOnly) Currently, my access_token is stored in localStorage and used for checking aut ...

javascriptvue.jsjwtvuex

Showing information in a table on a webpage using JavaScript and HTML

After running a console log, I am presented with the following data: 0: {smname: "thor", sim: "9976680249", pondo: "10"} 1: {smname: "asd", sim: "9999999999", pondo: "0"} 2: {smname: "asd", sim: "4444444444", pondo: "0"} 3: {smname: "bcvb", sim: "78678967 ...

javascripthtmlhtml-table

Using an ng-repeat directive alongside an if condition in Angular

My website contains a vast array of 30 articles, previously represented by around 300 lines of HTML code, but now condensed to just 10 lines with angularjs. However, certain articles hold special significance and require specific display criteria. Check ou ...

javascripthtmlangularjs

Error encountered while using JavaScript for waiting in Selenium

When using selenium and phantomjs to submit a form and then navigate back to the previous page, sometimes I encounter a timeout error as shown below: TimeoutError: Waiting for element to be located By(xpath,//div[@id='ContactFormBody']/div/br) W ...

javascriptnode.jsselenium

Automatically submitting forms without having to refresh the page

I have been searching for answers online, but none of them seem to help me. Additionally, I am struggling to grasp the concept of Ajax. I need everything to happen on a single page without any refreshing until the entire form is submitted. <form id=" ...

javascriptphpajaxforms

"Displaying 'Object Object' as a title when hovering over an element

I am currently using an accordion element to display several FAQs on a webpage. The code snippet for the accordion with content is as follows: { Object.keys(FAQS).map((key, index) => { return ( <div key={key}> ...

javascriptarraysreactjs

The present URL of Next.js version 13

When working with Next.js App Router in SSR, how can I retrieve the complete URL of the current page? I am unable to use window.location.href due to the absence of a defined window object, and using useRouter() does not provide access to the full URL. ...

javascripttypescriptnext.jsnext.js13

The module 'safe-buffer' is not found by NPM

Ever since installing yarn, I've been unable to use npm. The upgrade for NodeJS went smoothly. Trying to remove npm is proving impossible. Every command I attempt results in the same error message: module.js:487 throw err; ^ Error: Cannot f ...

javascriptnode.jsreactjsnpm