Sort the array based on the enum name rather than its value

Below is an example of an enumeration:

export enum Foo {
    AA = 0,
    ZZ = 1,
    AB = 2,
    ER = 5
}

In my case, I want to sort my Bars based on the name of the enum (AA, AB, ER, ZZ), rather than the numerical value (0, 1, 2, 5) that they represent.

I've been trying to use lodash for sorting, but it doesn't seem to be working as expected:

const orderedBars = _.orderBy(unorderedBars, 'foo');

Answer №1

You have the option to utilize localeCompare method to organize them based on their string value:

unorderedBars.sort((a,b) => Foo[a.foo].localeCompare(Foo[b.foo]))

Example on Typescript playgorund (Select "Run")

If the attribute is a string and you desire to sort it by its numerical value, you can sort it in this manner:

unorderedBars.sort((a, b) => Foo[a.foo] - Foo[b.foo])

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: TypeScript compilation failed due to absence of tsc command in the system

Hello, I recently installed TypeScript and encountered an issue when trying to initialize tsc -v in the terminal. The error message I received was "bash: tsc: command not found." During the installation process, I used npm install -g typescript@latest whi ...

Checkbox selection limitation feature not functioning correctly

Having trouble with my checkbox question function - I want to limit the number of checkboxes that can be checked to 3, but it's still allowing more than that. I suspect the issue lies with latestcheck.checked = false; This is my typescript function: ...

unanticipated redirection with Vue router

Here is the routing code snippet: // exporting for component use export var router = new VueRouter(); // defining routes router.map({ 'home': { component: Home, auth: true }, 'login': { component: L ...

What are the methods for choosing various boxes using the UP/DOWN/RIGHT/LEFT arrow keys?

This code snippet displays a 3x3 matrix where boxes can be hovered over and selected. The goal is to navigate around with keys and select boxes using ENTER. Can anyone provide guidance on how to achieve this functionality? <link rel="stylesheet" href ...

Issue with Ionic Capacitor React & Typescript build process for Firebase Functions

Recently, I've been working on a cutting-edge Ionic Capacitor React application that utilizes Typescript with a Firebase backend. While everything has been running smoothly so far, I encountered some challenges when trying to build Firebase Functions. ...

Tips on removing either the date or time when input type date and input type time share the same ng-model

In my Ionic app built with AngularJS, I have a form where the date and time are displayed separately but share the same data-ng-model: <input type="date" id ="actualVisitDate" data-ng-model="actualVisitDate" required> <input type="time" id ="actu ...

Creating a unique Elastic IP address for a single EC2 instance with the AWS CDK

I'm having an issue with my AWS CDK Stack where multiple Elastic IPs are being created for each public subnet in my VPC instead of just one. I only want one Elastic IP to be associated with a single EC2 instance. My simplified code snippet is as foll ...

What are some creative ways to visually distinguish a TextField that is in readOnly mode?

I'm currently working on creating a form using the Material-UI library. I'm having difficulty figuring out how to distinguish my TextField when they are in readOnly mode versus edit mode. At the moment, they appear identical and I would like the ...

Issue with Angular MatSelect Losing Selected Value in Reactive Form Upon Submission

Working on an Angular project with a reactive form that features a <mat-select> for selecting cities. Although the dropdown functions properly in displaying and allowing city selection, there's a problem when attempting to submit the form: the s ...

Using React's useEffect to implement a mousedown event listener

I created a modal that automatically closes when the user clicks outside of it. method one - involves passing isModalOpened to update the state only if the modal is currently open. const [isModalOpened, toggleModal] = useState(false); const ref = useRef(n ...

Create a JavaScript function that adds cells to a table, each containing an input field and a corresponding

I successfully developed a function that appends a table with rows and cells, then fills those cells with data from an array. However, I am now faced with the challenge of modifying it so that the generated cells contain an input field where the value= att ...

"NaN is being caused by the presence of quotation marks within the split property

Apologies if this question has already been addressed, but I'm struggling to find the answer. I've recently delved into coding as a new hobby and found it quite enjoyable. After using a website that claimed I had learned all there is to know abou ...

Using conditional rendering to compare the outcome of an asynchronous function within v-if condition

I have a Vue component for a sidebar with the following template: Vue.component('navigation',{ template:` <ul class="nav"> <li v-if="checkIfUserIsAdmin() == true" id="adminMenu"></li> <li id="userMenu">& ...

Retrieve all values of a specific enum type in TypeScript

When working with Typescript, I am looking to retrieve all values of an enum type and store them in an array. In C#, a similar method would look like this: public static TEnum[] GetValues<TEnum>() where TEnum : Enum { return Enum.GetValues(typeof ...

Hierarchy-based dynamic breadcrumbs incorporating different sections of the webpage

Currently in the process of developing a dynamic breadcrumb plugin with either jQuery or Javascript, however I am struggling to implement functionality that allows it to change dynamically as the page is scrolled. The goal is to have a fixed header elemen ...

Guidance on installing only TypeScript dependencies for building from package.json using npm, ensuring a leaner build without unnecessary 150MB of additional dependencies

Is there a way to optimize the dependency installation process for building, minimizing unnecessary packages and reducing the total download size by avoiding 150MB of excess files? This is more of a query rather than an immediate requirement Current depe ...

What is the best way to create a mapping function in JavaScript/TypeScript that accepts multiple dynamic variables as parameters?

Explaining my current situation might be a bit challenging. Essentially, I'm utilizing AWS Dynamodb to execute queries and aiming to present them in a chart using NGX-Charts in Angular4. The data that needs to appear in the chart should follow this fo ...

Tips for confirming date is earlier than current date in Reactjs?

Looking for guidance on how to ensure a date selected by a user is always before the current date when using Material UI in my project. For instance, if it's January 6th, 2021 and the user selects either January 5th or 6th that would be acceptable. Ho ...

Getting the current URL in InApp browser on Phonegap 3.0: A quick guide

Hey there, I am having trouble retrieving the current URL of an in-app browser when clicking the close button or at any time after loading a URL. Here's my code: var ref = window.open('http://google.com', '_blank', 'hidden=y ...

Steps to enable editing in an array

I'm struggling to implement an editing functionality for the lists inside the ul element in my simple to-do list project. Currently, I have the delete functionality working but need guidance on how to add an edit function. The list items are added by ...