Order Array of Objects

JavaScriptJavaScriptBeginner
Practice Now

This tutorial is from open-source community. Access the source code

Introduction

In this lab, we will explore how to sort an array of objects based on the properties and orders provided. We will use the Array.prototype.sort() method and the Array.prototype.reduce() method to achieve this. The lab will provide a practical understanding of how to manipulate arrays of objects in JavaScript.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/comp_ops("`Comparison Operators`") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("`Conditional Statements`") javascript/BasicConceptsGroup -.-> javascript/array_methods("`Array Methods`") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("`Higher-Order Functions`") javascript/AdvancedConceptsGroup -.-> javascript/destr_assign("`Destructuring Assignment`") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("`Spread and Rest Operators`") subgraph Lab Skills javascript/variables -.-> lab-28535{{"`Order Array of Objects`"}} javascript/data_types -.-> lab-28535{{"`Order Array of Objects`"}} javascript/arith_ops -.-> lab-28535{{"`Order Array of Objects`"}} javascript/comp_ops -.-> lab-28535{{"`Order Array of Objects`"}} javascript/cond_stmts -.-> lab-28535{{"`Order Array of Objects`"}} javascript/array_methods -.-> lab-28535{{"`Order Array of Objects`"}} javascript/higher_funcs -.-> lab-28535{{"`Order Array of Objects`"}} javascript/destr_assign -.-> lab-28535{{"`Order Array of Objects`"}} javascript/spread_rest -.-> lab-28535{{"`Order Array of Objects`"}} end

How to Order an Array of Objects in JavaScript

To order an array of objects in JavaScript, you can use the Array.prototype.sort() method and Array.prototype.reduce() method on the props array with a default value of 0.

Here's an example function, orderBy, that sorts an array of objects based on the specified properties and orders:

const orderBy = (arr, props, orders = ["asc"]) =>
  [...arr].sort((a, b) =>
    props.reduce((acc, prop, i) => {
      if (acc === 0) {
        const [p1, p2] =
          orders[i] === "desc" ? [b[prop], a[prop]] : [a[prop], b[prop]];
        acc = p1 > p2 ? 1 : p1 < p2 ? -1 : 0;
      }
      return acc;
    }, 0)
  );

To use this function, pass in an array of objects, an array of properties to sort by, and an optional array of orders. If no orders array is supplied, the function will sort by 'asc' by default.

Here are some examples of how to use the orderBy function:

const users = [
  { name: "fred", age: 48 },
  { name: "barney", age: 36 },
  { name: "fred", age: 40 }
];

// sort by name ascending and age descending
orderBy(users, ["name", "age"], ["asc", "desc"]);
// Output: [{name: 'barney', age: 36}, {name: 'fred', age: 48}, {name: 'fred', age: 40}]

// sort by name ascending and age ascending (default order)
orderBy(users, ["name", "age"]);
// Output: [{name: 'barney', age: 36}, {name: 'fred', age: 40}, {name: 'fred', age: 48}]

Summary

Congratulations! You have completed the Order Array of Objects lab. You can practice more labs in LabEx to improve your skills.

Other JavaScript Tutorials you may like