Is it necessary to separate Lodash orderby functions to ensure they function correctly?

For some reason, I'm having trouble sorting my data using lodash in my front-end client code.

All the examples I've come across don't involve working with data in an interface, so I can't figure out where I'm going wrong.

Let's consider a scenario where I need to sort products by isInPriceList (descending), listorder (descending), and name (ascending).

You can check out my stackblitz example at https://stackblitz.com/edit/typescript-lodash-playground-kbtjbg

interface IProduct {
    name: string;
    isInPriceList: boolean;
    listOrder: number;
}

...add some data

const sortedData = _.orderBy( data, p => [ p.isInPriceList, p.listOrder, p.name ], [ "desc", "desc", "asc"]);

Unfortunately, the above code doesn't sort the data as intended. However, the following approach does work:

let correctlySortedData = _.orderBy( data, p => p.name, "asc");
correctlySortedData = _.orderBy( correctlySortedData, p => p.listOrder, "desc" );
correctlySortedData = _.orderBy( correctlySortedData, p => p.isInPriceList, "desc" );

I suspect there may be an issue with the second parameter being passed.

Answer №1

To order by specific parameters, the second argument should be an iterator that resolves to an array containing the names (strings) of the parameters. For example:

const sortedData = _.orderBy(data, ['isInPriceList', 'listOrder', 'name'], ["desc", "desc", "asc"]);

For more details, refer to the documentation example: https://lodash.com/docs/4.17.15#orderBy

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

Is it feasible to return data when utilizing the ModalController in Ionic 5, specifically when executing a swipeToClose or backdropDismiss action?

With the latest update to Ionic 5's ModalController, a new feature allows users to swipe down on a modal to close it in addition to using the backdropDismiss parameter. Here is an example of how to enable this functionality: const modal = await this. ...

Developing bespoke styles in Angular Material 2

I am in the process of developing a unique theme for my Angular 2 application, incorporating various components from angular material 2. Despite searching extensively online, I haven't been able to find much relevant information. The only documentati ...

Can you provide guidance on how to access my account using the code that I have?

I'm having trouble getting the login functionality to work properly with this code. When I click the login button, nothing happens - no errors are displayed either. Can you help me identify what might be causing this issue? login() { var url = &ap ...

Discovering the JavaScript source file for a package using WebStorm and TypeScript

In my TypeScript project, there is a usage of Express with the following method: response.send('Hello'); I am interested in exploring the implementation of the send() method. However, when I try to navigate to the source code by ctrl+clicking o ...

Activate the field once the input for the other field is completed

I have a form where the last name field is initially disabled. How can I make it so that the last name field becomes enabled only when the first name is inputted? <form> <label for="fname">First name:</label><br> ...

Components in Angular 4 that are loaded dynamically using attribute directives are enclosed within a <div> element

My goal is to dynamically generate components based on the configuration options, specifically creating a toolbar with different "toolbar items". Following the Angular guide at: https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html, I h ...

Enhancing IntelliSense to recognize exports specified in package.json

I have a package.json file where I define various scripts to be exported using the exports field. "exports": { ".": { "default": "./dist/main.es.js", "require": "./dist/main.cjs.js", ...

Attempting to create a finalized build of Express using Typescript

Encountering the following error message when executing this command: npm run clear && tsc -P ./tsconfig.app.json && npm run post:build or tsc -p . Node version: v12.13.0 NPM: v6.14.2 Express: 4 Has anyone else faced a similar issue? > ...

Why does my error handler log errors in the console instead of the response?

This is my first time asking a question here, so please forgive me if I make any mistakes. I am open to suggestions on how to improve my question-asking skills. I am facing an issue with my error handler not displaying the message in the response; instead ...

Package.json file is not included in Typescript

Each time I execute tsc, it converts the files to JS format successfully, except for package.json. I want this file included in my output directory. Currently, my tsconfig.json looks like this: { "exclude": ["node_modules"], "compilerOptions": { " ...

What is the function of the Angular dependency injection mechanism?

I'm trying to grasp the inner workings of Angular/NestJs dependency injection. It's intriguing how the type of parameters gets lost when a Typescript class is constructed. For example: type Dependency1 = {}; type Dependency2 = {}; class X { ...

Utilizing typescript to isolate specific functionality from a class without extending it

Imagine a scenario where I have a class with different areas of functionality: export class TreeTable extends someOtherClass { constructor(){ super.constructor(); } //========= area 1 of functionality ==== itemRightClick(){this.contex ...

Maximizing the potential of process.hrtime.bigint

Whenever I include the following code: const a = process.hrtime.bigint(); The linter says it's okay, but during compilation, I encounter this error message: error TS2339: Property 'bigint' does not exist on type 'HRTime'. This ...

The JSX component cannot be 'FieldArray' at this time

I'm working on a next.js project and using the Formik component. However, I encountered a type error that says "'FieldArray' cannot be used as a JSX component." Can anyone help me resolve this issue? Here is the error message: 'FieldAr ...

Angular's table data display feature is unfortunately lacking

Below is a simple HTML code snippet: <div class="dialogs"> <div id="wrapper" > <p>{{createTestingConstant()}}</p> <ng-container *ngFor="let one of contacts"> <p>{{one ...

Unable to show the input's value

Need help in taking user input to display calculated values //html <div class="empty"> <h5> Enter Empty Seats </h5> <ion-item> <ion-input placeholder="Enter Number of Empties.." type="number" name="emptySeats" [( ...

The function 'makeDecorator' does not support function calls when being accessed

Resolved by @alexzuza. Check out his solution below - major props! The issue was with the node_modules folder in the ng2-opd-popup directory, it needed to be removed and the src/tsconfig.app.json file had to be adjusted accordingly. Make sure to also refer ...

What are the steps for integrating Socket.IO into NUXT 3?

I am in search of a solution to integrate Socket.IO with my Nuxt 3 application. My requirement is for the Nuxt app and the Socket.IO server to operate on the same port, and for the Socket.IO server to automatically initiate as soon as the Nuxt app is ready ...

The absence of a function implementation right after the declaration within a TypeScript class is a common issue that needs

I received a handwritten array to populate a table for my class, however I am now fetching this array's content from a JSON during the ngOnInit phase and it is not structured in the way I require. Therefore, I am attempting to create a function that ...

The attribute 'positive_rule' is not found within the structure '{ addMore(): void; remove(index: any): void;'

data() { return { positive_rule: [ { positive_rule: "", }, ], }; }, methods: { addMore() { this.positive_rule.push({ positive_rule: "", }); }, ...