Sort array of objects by key value in JavaScript

  • Post category:JavaScript
  • Reading time:4 mins read

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 array of objects by key value

// 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);
// Output: [{"name":"grape","price":1},{"name":"apple","price":2},{"name":"banana","price":3},{"name":"orange","price":4}]

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

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

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

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

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..!!

Tags:

Leave a Reply