LWC: Sorting based on an object property

Have you ever come across a situation where you were required to perform sorting dynamically based on the property of an object, or from the JSON data?

import { LightningElement, track } from 'lwc';

export default class MyComponent extends LightningElement {
    @track productAttributes = {
        Fit__c: {
            label: 'Fit',
            sequence: 0,
            value: 'Petite',
        },
        Inseam__c: {
            label: 'Inseam',
            sequence: 3,
            value: '29"',
        },
        Sizes__c: {
            label: 'Size',
            sequence: 2,
            value: '6"',
        },
        Color__c: {
            label: 'Color',
            sequence: 1,
            value: 'Passport Plum',
        },
    };

    
}

In the above code block, let’s say you want to sort the data based on the common key, which in this case is sequence.

So, we can do that in the following way :

 const sortedAttributes = Object.values(
 this.productAttributes).sort((a, b) => a.sequence - b.sequence);

        // Update the productAttributes object with the sorted attributes
        this.productAttributes = sortedAttributes;
    }

In this line of code, the Object.values() method is used to get an array of the values of the productAttributes object. This array is then passed to the sort() method, which sorts the array in ascending order based on the sequence property of each object in the array.

The sort() method takes a compare function as an argument, which specifies the sorting order. In this case, the compare function is (a, b) => a.sequence - b.sequence. This compare function compares the sequence property of two objects (a and b) and returns a negative value if a.sequence is less than b.sequence, a positive value if a.sequence is greater than b.sequence, and 0 if a.sequence and b.sequence are equal. This causes the array to be sorted in ascending order based on the sequence property.

The result of the sort() method is stored in the sortedAttributes variable, which is then used to update the productAttributes object with the sorted attributes.

How to do the same in descending?

To sort the productAttributes object in descending order based on the sequence property, you can modify the compare function passed to the sort() method as follows:

const sortedAttributes = Object.values(
this.productAttributes).sort((a, b) => b.sequence - a.sequence);

Alternatively, you can use the reverse() method to reverse the order of the sorted array:

const sortedAttributes = Object.values(
this.productAttributes).sort((a, b) => a.sequence - b.sequence).reverse();

This will first sort the array in ascending order based on the sequence property, and then reverse the order of the elements in the array.

Html code :

<template>
    <template for:each={productAttributes} for:item="attribute">
        <p>{attribute.label}: {attribute.value}</p>
    </template>
</template>

Note : The time and space complexity of the sort cannot be guaranteed as it depends on the implementation.

That’s all folks. If you find this informative, do like and share.

If you have a better way to do it, do let me know in the comments.

Thanks!