Join egghead, unlock knowledge.

Want more egghead? It's 45% off for a limited time only!

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock All Content for 45% Off

Already subscribed? Sign In

Save 45% for a limited time.

Get access to all courses and lessons on egghead today.

Autoplay

    Sort an Array of Objects by Multiple Fields with Ramda's sortWith

    Andy Van SlaarsAndy Van Slaars

    Sorting an array of objects by multiple fields can be tricky. Even worse, the code can be tough to follow and making changes in the future is complicated by conditional logic in the sorting function. In this lesson we'll see how to simplify this using Ramda's sortWith along with ascending and descending. We'll sort an array of objects by multiple fields and the code will be readable and dead simple to change.

    ramdaRamda
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:01 I'm using destructuring to pull a few utility functions in from Ramda. I have some sample data that consists of an array of objects, each object representing a person with a name, age, and height.

    00:10 I'm logging the array out to the console. I'd like to take this list and I'd like to sort it by each person's age. I'm going to use Ramda's sort, and the first argument for sort is going to be a comparator function, so for that I'm going to use ascend, and then I'm going to pass that call to prop with age.

    00:30 This is going to send in ascending order by age, and the I pass it my array of data and we'll see our result has been updated. Reese is first, John is last, and then I have a group in the middle where all the ages match. In the cases where the ages match, I'd also like to sort by height in descending order.

    00:49 I can't do that with sort directly without changing my comparator function, so what I'd like to do is use sortWith instead. Instead of taking a single comparator function, this will take an array of comparators and run them in order.

    01:01 I'm going to sot ascending by age, and I'm going to use descend to sort in descending order, by height. We'll see that Bob and Allen have been moved above Sally. In a case like Bob and Allen where the age and the height are both the same, I'd also like to sort in alphabetical order.

    01:23 I'm going to use ascend again, and this time I'm going to sort based on the name prop, and we'll see that Allen and Bob have been switched around, and everybody's in order by age, followed by height, followed by alphabetical by their name.

    01:38 The great thing about using this setup, is that each comparator is separated, and if I want to change the way this is done, say I want to sort by age then height, all I have to do is take that height comparator, and move it up and my list will be resorted by height, then age, then by name alphabetically.

    Discuss

    Discuss