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

What is the purpose of creating a new HTTP instance for Socket.io when we already have an existing Express server in place?

As I delve into SocketIO, I've combed through various blogs and documentation on sockets. It seems that in most cases, the standard approach involves creating an HTTP server first and then attaching the socket to it as shown below: var app = express() ...

javascriptnode.jsexpresshttpsocket.io

Guide to developing a reusable component or partial in react.js

My first experience with React.js involved a relatively simple task. I started by creating an app.js file that loads the initial page, containing my navigation menu and rendering the children props. However, I realized that instead of keeping the navigat ...

javascriptreactjswebweb-deployment

Learn the technique of coding HTML within inline JavaScript, along with implementing CSS inline styling

I'm looking for a way to incorporate HTML within inline JavaScript, along with CSS inline styles. Can someone provide guidance on how to achieve this? For example, something like the following code snippet: <p><span style="color: #00ff00;"&g ...

javascripthtml

In Safari, non-ascii characters are incorrectly stored in document.cookies as trash

Below is a snippet of JavaScript code that I am working with: wdata['account'] = {"value": $(input).val(), "title": "Номер карты получения"}; var r = { "ipayway": ipw_selected, "wpayway": wpw_selected, "amount_type" ...

javascriptjsoncookiessafaricross-browser

Is it possible for Angular.js to interact with JSTL expression language?

Is it possible for angular.js to interact with JSTL expression language? I am trying to generate ng-options using an array. Here is an example of what I am attempting to accomplish: <select ng-model="detail" ng-init="Categories = '${Categories}& ...

javascriptangularjsjstlangularjs-ng-repeatangularjs-ng-init

What is the method for altering a CSS element's keyframe animation while it is currently running?

My little mouse speed detector, although not perfect, provides me with the current mouse speed every 100ms in the variable window.mouseSpeed.t. I decided to implement this feature because I wanted to create a whimsical animation at the bottom edge of the s ...

javascriptanimationcss-transitionsaccelerometermousemove

Spinning image on button click with seamless animation in Javascript

I'm trying to make an image rotate every second using the code below, but it's not working. Can you help me figure out why? <html> <head> <style> .rotated-image { -webkit-transform: rotate(2deg); transform: rotate(2deg); } & ...

javascript

Single array returned by observable

Issue: I am looking for a way to consolidate the multiple arrays returned individually into a single array. Solution: fetchAllRiders() { var distanceObs = Observable.create(observer => { this.http.get(this.API + '/driver/all').map(res = ...

javascriptangularrxjs

Obtaining data from the following entry in JSON format using the Twitter API

I am currently developing a webpage that showcases user tweets, however I want to visually represent the gap in time between each tweet by displaying empty spaces. I have been struggling with the logic of how to achieve this task and haven't made muc ...

javascriptjqueryjsontwitter

What is the best way to send FormData from a React JS axios post request to a Node server?

I am facing an issue where the form data is not reaching the node server even though it shows in the network payload at the time of request. Below are the snippets from different files involved in the process. let formData = new FormData(); // fo ...

javascriptnode.jsreactjsmongodbexpress

Transforming functions with dependencies into asynchronous operations with the help of promises

Can I convert both of my functions into asynchronous functions, even though one function relies on the other? Is it feasible for function b to execute only after function a? ...

javascripthtml

I'm encountering a problem with handling errors in Express.js: A critical error has occurred while attempting to execute the _runMicro

Currently, I am utilizing the Blizzard API Battle.Net to fetch information regarding a character's name and the realm they inhabit. In certain cases, a user may request a character that does not exist, prompting Blizzard to return a 404 error response ...

javascriptnode.jshttpexpress

`Vue Component failing to display data from Blade File`

In my project using Laravel Blade, I am currently in the process of converting some blade files to Vue components. One challenge I encountered is trying to display a dynamically created page title on the screen from the Vue component rather than the blade ...

javascriptphplaravelvue.js

What methods can be used to differentiate between value equality and reference equality when watching something?

In the world of AngularJS, the $watch function comes with an interesting twist - it has an optional third parameter. By default, this parameter is set to false, which means the watch will only trigger if the watched reference changes. But if you set it to ...

javascriptangularjswatch

Tips for exchanging JavaScript variables with PHP using AJAX

Hey there, I'm new to JavaScript and I've hit a roadblock with passing variables to PHP using Ajax. <script> $date = "123"; $.ajax({ url: './record.php', type: "POST", ...

javascriptphpjqueryajax

Setting a custom expiration time for a custom token in Firebase authentication

Using the firebase custom auth, I have created a custom token. I am looking for a way to customize and update this token by shortening its expiry time based on when a session finishes. For example, if a session ends after 20 seconds or 5 minutes, I want to ...

javascriptnode.jsfirebasefirebase-authenticationfirebase-admin

Troubleshooting problem with updating a record in the MongoDB using Node.js and

Currently, I am developing a REST API using Node, Express, and MongoDB. I have successfully implemented fetch, create, and delete functions but facing issues with the update function. Every time I attempt to test it using Postman, the code hangs, the serve ...

javascriptnode.jsmongodbexpressecmascript-6

Bringing in additional elements, ensure that there is only a single main root element

Apologies for the beginner question. I am facing an issue while trying to display a .vue file with parent and children components, resulting in a "more than one root element" error. It seems strange to me because the imported components are supposed to be ...

javascriptvue.js

Javascript: struggling with focus loss

Looking for a way to transform a navigation item into a search bar upon clicking, and revert back to its original state when the user clicks elsewhere. The morphing aspect is working correctly but I'm having trouble using 'blur' to trigger t ...

javascripthtmlblur

The tooltip feature is functioning properly on the button, but unfortunately it is not working

I am incorporating Tooltips into my project, utilizing Vue 3 and Bootstrap 5. In the script section, I have included the following: <script> import { Tooltip } from "bootstrap/dist/js/bootstrap.esm.min.js"; export default { mounte ...

javascriptvue.jsvuejs3bootstrap-5