by Sai gowtham

How to sort the array of objects by key in JavaScript

JavaScript has an inbuilt sort method which helps us to sort the array of the objects easily; we don’t need to write our own custom sort methods.

consider we have an array of objects with name and price properties.


const vegetables =  [

    {name:"beans",price: 5},
    {name:"tomato",price: 3},
    {name:"pumpkin",price: 2},
    {name:"broccoli",price: 7},
]

We need to sort the vegetables array in ascending order by using its price property.

example:

const vegetables =  [

     {name:"beans",price: 5},
     {name:"tomato",price: 3},
     {name:"pumpkin",price: 2},
     {name:"broccoli",price: 7},
]


console.log(vegetables.sort((a,b) =>  a.price-b.price ))
output - >

[
  {name: "pumpkin", price: 2},
  {name: "tomato", price: 3},
  {name: "beans",  price: 5},
  {name: "broccoli", price: 7}
]

Array.sort() : The sort method takes the callback function as its argument and returns the sorted array.

The return condition inside the callback function.

  • if our return condition is a - b then it sorts the array in ascending order.

  • if our return condition is b - a then it sorts the array in descending order.

Let’s sort our vegetables array in descending order.

console.log(vegetables.sort((a,b) =>  b.price-a.price ))
output- >

[
  {name: "broccoli",price: 7},
  {name: "beans",price: 5},
  {name: "tomato",price: 3},
  {name: "pumpkin",price: 2}
]

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2021 (Beginner + Advanced)
JavaScript - The Complete Guide 2021 (Beginner + Advanced)
64,026 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
152,857 students enrolled
48.5 hours of video content
View Course