How to Sort Array of Objects in JavaScript

In this post, we are going to learn How to Sort an Array of Objects in JavaScript. The array. sort() method is used to sort the array of objects in Javascript. We will learn about it with example by using Javascript ES6 and arrow function

  • Sort array of objects in JavaScript by number value
  • Sort array of objects by number value descending order
  • Sort array of an object by two numeric field
  • Sort array of object by string values/property value
  • Sort array of object by date in JavaScript

1. Sort array of objects in JavaScript by number value


In this program example, we will discuss how to sort an array of objects in javascript by using an array.sort() method, We have groceries array of objects that we are sorting by the prize in ascending order. We will display the sorted array of objects by using the foreach loop to iterate throughit and print output.

let groceries = [
    {
        item: 'Apple',
        prize: 80,
        Quantity:20,
        purchasedDate: 'December 3, 2019'
    },
    {
        item: 'Graphes',
        prize: 100,
        Quantity:10,
        purchasedDate: 'December 21, 2020'
    },
    {
         item: 'Banana',
        prize: 56,
        Quantity:5,
        purchasedDate: 'December 23, 2021'
    }
];


//ascending order
groceries.sort((t1, t2) => {
    return t1.prize - t2.prize;
});

console.log("asceding order:")

groceries.forEach((g) => {
    console.log(`${g.item} ${g.prize} ${g.Quantity} ${g.purchasedDate}`);
});

Output

asceding order:
Banana 56 5 December 23, 2021
Apple 80 20 December 3, 2019
Graphes 100 10 December 21, 2020

Sort array of objects by number value descending order


//Descending order
groceries.sort((t1, t2) => {
    return t2.prize - t1.prize;
});

console.log("Descending order:")

groceries.forEach((g) => {
    console.log(`${g.item} ${g.prize} ${g.Quantity} ${g.purchasedDate}`);
});

Output

Descending order:

Graphes 100 10 December 21, 2020
Apple 80 20 December 3, 2019
Banana 56 5 December 23, 2021

2. Sort array of an object in JavaScript by two numeric field


In this example, we are sorting an array of object groceries by two numeric filed prize and quantity in ascending order. To sort groceries array of object by numeric descending order.

//Descending order
groceries.sort(function (t1,t2) {   
    return t2.prize - t1.prize || t2.Quantity - t1.Quantity;
});

Ascending order by two numberic field

//ascending order

groceries.sort(function (t1,t2) {   
    return t1.prize - t2.prize || t1.Quantity - t2.Quantity;
});

//using arrow function
groceries.sort((t1,t2)=>
     t1.prize - t2.prize || t1.Quantity - t2.Quantity);

groceries.forEach((g) => {
    console.log(`${g.item} ${g.prize} ${g.Quantity} ${g.purchasedDate}`);
});

Output

Graphes 56 5 December 23, 2021
Apple 80 20 December 3, 2019
Graphes 100 10 December 21, 2020

3. Sort array of object by string values/property value


To sort a array of object of by string values or alphabetically in javascript case insensitive. In this example we have groceries in which we are sorting array of objects by string value item,this code can be used to sort the javascript array of object by key.

groceries.sort((t1, t2) => (t1.item.toLowerCase() > t2.item.toLowerCase()) ? 1 : -1)

groceries.forEach((g) => {
    console.log(`${g.item} ${g.prize} ${g.Quantity} ${g.purchasedDate}`);
});





//in ES6 or later lesser code to achive this 


console.log('\n in ES6 or later')
groceries.sort((t1, t2) => t1.item.localeCompare(t2.item));

groceries.forEach((g) => {
    console.log(`${g.item} ${g.prize} ${g.Quantity} ${g.purchasedDate}`);
});

Output

Apple 80 20 December 3, 2019
Banana 56 5 December 23, 2021
Graphes 100 10 December 21, 2020

 in ES6 or later
Apple 80 20 December 3, 2019
Banana 56 5 December 23, 2021
Graphes 100 10 December 21, 2020

4. Sort array of object by date in JavaScript


Sometimes we have date values as strings in an array of objects. To sort an array of objects by the date the first we have to convert string date into date and then subtract those dates to sort the array. Finally, use for each loop to iterate through the array of objects and print the result.

groceries.sort(function(t1,t2){
  
  return new Date(t2.date) - new Date(t1.date);
});



groceries.forEach((g) => {
    console.log(`${g.item} ${g.prize} ${g.Quantity} ${g.purchasedDate}`);
});

Output

Apple 80 20 December 3, 2019
Graphes 100 10 December 21, 2020
Banana 56 5 December 23, 2021

Summary

In this post, we have learned How to Sort Array of Objects in JavaScript with code examples by using array.sort() method ,some example using es6 and arrow function.