Sort an array of objects by key value in JavaScript
To sort an array of objects by a specific key value in JavaScript, you can use the sort() method along with a comparison function that compares the values of the key for each object.
Example: Sort an array of objects by key value
1 2 3 4 5 6 7 8 9 10 11 12 13 | // array of objects const fruits = [ { name: 'banana', price: 3 }, { name: 'apple', price: 2 }, { name: 'orange', price: 4 }, { name: 'grape', price: 1 } ]; // sort by price (ascending) fruits.sort((a, b) => a.price - b.price); // output the sorted array console.log(fruits); |
In the above example, the sort() method is used to sort the fruits array by the price key. The comparison function (a, b) => a.price - b.price compares the price values of each object in the array and returns a negative number if the first object’s price is less than the second, a positive number if the first object’s price is greater than the second, or zero if the prices are equal. This causes the sort() method to order the objects in ascending order based on their price values.
You can modify the comparison function to sort the array by other keys or in descending order by reversing the sign of the comparison result.
Here are some more examples of sorting an array of objects by key value in JavaScript:
Example 1: Sorting by numeric values
1 2 3 4 5 6 7 8 9 10 11 | const people = [ { name: 'John', age: 25 }, { name: 'Jane', age: 30 }, { name: 'Bob', age: 20 }, { name: 'Sarah', age: 27 } ]; // Sort by age const sortedPeople = people.sort((a, b) => a.age - b.age); console.log(sortedPeople); // Output: [{name: 'Bob', age: 20}, {name: 'John', age: 25}, {name: 'Sarah', age: 27}, {name: 'Jane', age: 30}] |
Example 2: Sorting by string values
1 2 3 4 5 6 7 8 9 10 11 | const fruits = [ { name: 'banana', price: 0.5 }, { name: 'apple', price: 0.6 }, { name: 'grape', price: 0.4 }, { name: 'orange', price: 0.3 } ]; // Sort by name const sortedFruits = fruits.sort((a, b) => a.name.localeCompare(b.name)); console.log(sortedFruits); // Output: [{name: 'apple', price: 0.6}, {name: 'banana', price: 0.5}, {name: 'grape', price: 0.4}, {name: 'orange', price: 0.3}] |
Example 3: Sorting by date values
1 2 3 4 5 6 7 8 9 10 11 | const events = [ { name: 'Meeting', date: new Date('2023-02-15T10:30:00.000Z') }, { name: 'Conference', date: new Date('2023-02-18T14:00:00.000Z') }, { name: 'Webinar', date: new Date('2023-02-12T16:30:00.000Z') }, { name: 'Workshop', date: new Date('2023-02-20T09:00:00.000Z') } ]; // Sort by date const sortedEvents = events.sort((a, b) => a.date - b.date); console.log(sortedEvents); // Output: [{name: 'Webinar', date: '2023-02-12T16:30:00.000Z'}, {name: 'Meeting', date: '2023-02-15T10:30:00.000Z'}, {name: 'Conference', date: '2023-02-18T14:00:00.000Z'}, {name: 'Workshop', date: '2023-02-20T09:00:00.000Z'}] |
Example 4: Sorting by boolean values
1 2 3 4 5 6 7 8 9 10 11 | const tasks = [ { name: 'Task 1', completed: false }, { name: 'Task 2', completed: true }, { name: 'Task 3', completed: false }, { name: 'Task 4', completed: true } ]; // Sort by completed status const sortedTasks = tasks.sort((a, b) => a.completed - b.completed); console.log(sortedTasks); // Output: [{name: 'Task 1', completed: false}, {name: 'Task 3', completed: false}, {name: 'Task 2', completed: true}, {name: 'Task 4', completed: true}] |
That’s it for today.
Thank you for reading. Happy Coding..!!
