onlinecode

Sort an Array of Objects in JavaScript

onlinecode

Sort an Array of Objects in JavaScript

Sort an Array of Objects in JavaScript

In this post, we will give you information about Sort an Array of Objects in JavaScript . Here we will give you detail about Sort an Array of Objects in JavaScript And how to use it also give you a demo for it if it is necessary.

Suppose you have a JavaScript array containing Star Trek: The Next Generation characters:

const characters = [
  { firstName: 'Jean-Luc', lastName: 'Picard', rank: 'Captain', age: 59 },
  { firstName: 'Will', lastName: 'Riker', rank: 'Commander', age: 29 },
  { firstName: 'Geordi', lastName: 'La Forge', rank: 'Lieutenant', age: 29 }
];

How do you sort this array by different properties?

Sorting By age

JavaScript’s built-in Array#sort() function optionally takes a callback parameter that compares two elements in the array.

The callback function is called compareFunction(). If compareFunction(a, b) returns a value that is < 0, JavaScript considers a to be less than b.
And if compareFunction(a, b) returns a value that is > 0, JavaScript considers b to be greater than a. That means it is easy to sort by a numeric property like age. If a.age - b.age < 0, that means b is older than a.

const characters = [
  { firstName: 'Jean-Luc', lastName: 'Picard', rank: 'Captain', age: 59 },
  { firstName: 'Will', lastName: 'Riker', rank: 'Commander', age: 29 },
  { firstName: 'Geordi', lastName: 'La Forge', rank: 'Lieutenant', age: 29 }
];

characters.sort((a, b) => a.age - b.age);

// Riker, La Forge, Picard
characters;

Sorting by lastName

Sorting by a string property like lastName is also easy, because
JavaScript’s < and > properties can handle strings. To sort
by a string property, your compareFunction() can compare the
two strings using <:

const characters = [
  { firstName: 'Jean-Luc', lastName: 'Picard', rank: 'Captain', age: 59 },
  { firstName: 'Will', lastName: 'Riker', rank: 'Commander', age: 29 },
  { firstName: 'Geordi', lastName: 'La Forge', rank: 'Lieutenant', age: 29 }
];

characters.sort((a, b) => {
  if (a === b) {
    return 0;
  }
  return a.lastName < b.lastName ? -1 : 1;
});

// La Forge, Picard, Riker
characters;

Sorting by rank

Sorting by rank is a bit trickier because rank isn’t necessarily
in alphabetical order. JavaScript doesn’t know that ‘Captain’ is
a higher rank than ‘Lieutenant’.

See also  Logical Operators in JavaScript

To sort by a custom ordering, you should define a map from
rank to a numeric value to make for easier comparison.

const characters = [
  { firstName: 'Jean-Luc', lastName: 'Picard', rank: 'Captain', age: 59 },
  { firstName: 'Will', lastName: 'Riker', rank: 'Commander', age: 29 },
  { firstName: 'Geordi', lastName: 'La Forge', rank: 'Lieutenant', age: 29 }
];

const rankOrder = new Map([
  ['Captain', 1],
  ['Commander', 2],
  ['Lieutenant', 3]
]);

characters.sort((a, b) => {
  return rankOrder.get(a.rank) - rankOrder.get(b.rank);
});

// Picard, Riker, La Forge
characters;

 

JavaScript Fundamentals for Sort an Array of Objects in JavaScript

JavaScript is a programming language that is used to create interactive web pages. It is a client-side scripting language, which means that it runs on the user’s browser. JavaScript can be used to add animation, interactivity, and functionality to web pages.

Here are some of the fundamentals of JavaScript:

See also  Check a String for Numbers in JavaScript

These are just some of the fundamentals of JavaScript. There are many other concepts that you can learn as you continue to develop your skills.

Here are some resources that you can use to learn more about JavaScript:

See also  `this` in JavaScript - onlinecode

I hope this helps for Sort an Array of Objects in JavaScript!

Here are some additional tips for learning JavaScript:

With a little practice, you’ll be able to learn JavaScript and start building amazing web applications.

Hope this code and post will helped you for implement Sort an Array of Objects in JavaScript. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Exit mobile version