Arrange an array of objects to a specific sequence

Question

Arrange an array of objects to a specific sequence

I am currently working with an array of objects that contain a property named 'CODE'.

[
  {
   ID: 168,
   NAME: "First name",
   CODE: "AD"
  },
  {
   ID: 167,
   NAME: "Second name",
   CODE: "CC"
  },
  {
   ID: 169,
   NAME: "Third name",
   CODE: "CCM"
  },
  {
   ID: 170,
   NAME: "Fourth name",
   CODE: "CR"
  },
]

My question is, how can I sort this array based on a customized order such as:

var item_order = ["CCM","CR","AD","CC"];

I have attempted different methods but so far without any success. Any assistance would be greatly appreciated.

javascript angularjs underscore.js

Answer 1

Answer №1

If you want to organize an array based on a specific order, you can utilize the sort function in conjunction with indexOf.

var array = [  {   ID: 168,   NAME: "First name",   CODE: "AD"  },  {   ID: 167,   NAME: "Second name",   CODE: "CC"  },  {   ID: 169,   NAME: "Third name",   CODE: "CCM"  },  {   ID: 170,   NAME: "Fourth name",   CODE: "CR"  }],
    item_order = ["CCM","CR","AD","CC"];

array.sort((a, b) => item_order.indexOf(a.CODE) - item_order.indexOf(b.CODE));

console.log(array);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

If you want to organize an array based on a specific order, you can utilize the sort function in conjunction with indexOf.

var array = [  {   ID: 168,   NAME: "First name",   CODE: "AD"  },  {   ID: 167,   NAME: "Second name",   CODE: "CC"  },  {   ID: 169,   NAME: "Third name",   CODE: "CCM"  },  {   ID: 170,   NAME: "Fourth name",   CODE: "CR"  }],
    item_order = ["CCM","CR","AD","CC"];

array.sort((a, b) => item_order.indexOf(a.CODE) - item_order.indexOf(b.CODE));

console.log(array);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 3

Answer №2

If you're dealing with large arrays, it's recommended to utilize an object for the indices.

var array = [{ ID: 168, NAME: "First name", CODE: "AD" }, { ID: 167, NAME: "Second name", CODE: "CC" }, { ID: 169, NAME: "Third name", CODE: "CCM" }, { ID: 170, NAME: "Fourth name", CODE: "CR" }],
    item_order = ["CCM", "CR", "AD", "CC"],
    order = item_order.reduce((r, k, v) => Object.assign(r, { [k]: v }), {});

array.sort((a, b) => order[a.CODE] - order[b.CODE]);

console.log(array);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 4

If you're dealing with large arrays, it's recommended to utilize an object for the indices.

var array = [{ ID: 168, NAME: "First name", CODE: "AD" }, { ID: 167, NAME: "Second name", CODE: "CC" }, { ID: 169, NAME: "Third name", CODE: "CCM" }, { ID: 170, NAME: "Fourth name", CODE: "CR" }],
    item_order = ["CCM", "CR", "AD", "CC"],
    order = item_order.reduce((r, k, v) => Object.assign(r, { [k]: v }), {});

array.sort((a, b) => order[a.CODE] - order[b.CODE]);

console.log(array);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 5

Answer №3

For situations where you find yourself needing to perform this kind of operation frequently, it may be beneficial to create a small utility function to assist:

const array = [{ ID: 168, NAME: "First name", CODE: "AD" }, { ID: 167, NAME: "Second name", CODE: "CC" }, { ID: 169, NAME: "Third name", CODE: "CCM" }, { ID: 170, NAME: "Fourth name", CODE: "CR" },{ ID: 166, NAME: "Fifth name", CODE: "CCM" }, { ID: 171, NAME: "Sixth name", CODE: "XXX" }, { ID: 172, NAME: "Seventh name", CODE: "CR" }]

const sortOn = (prop, list) => {
  const order = list.reduce((obj, key, idx) => Object.assign(obj, { [key]: idx + 1}), {});
  const getVal = item => order[item[prop]] || Infinity
  
  return (a, b) => getVal(a) - getVal(b)
}

array.sort(sortOn('CODE', ["CCM", "CR", "AD", "CC"]))
console.log(array)

The approach used in the order object aligns with Nina Scholz's suggestion. The decision to add 1 to idx instead of using just idx is aimed at simplifying the subsequent line of code. By employing Infinity, items with undefined or non-matching key values are positioned towards the end during sorting. To place these items at the beginning instead, consider using 0 or -Infinity.

Answer 6

For situations where you find yourself needing to perform this kind of operation frequently, it may be beneficial to create a small utility function to assist:

const array = [{ ID: 168, NAME: "First name", CODE: "AD" }, { ID: 167, NAME: "Second name", CODE: "CC" }, { ID: 169, NAME: "Third name", CODE: "CCM" }, { ID: 170, NAME: "Fourth name", CODE: "CR" },{ ID: 166, NAME: "Fifth name", CODE: "CCM" }, { ID: 171, NAME: "Sixth name", CODE: "XXX" }, { ID: 172, NAME: "Seventh name", CODE: "CR" }]

const sortOn = (prop, list) => {
  const order = list.reduce((obj, key, idx) => Object.assign(obj, { [key]: idx + 1}), {});
  const getVal = item => order[item[prop]] || Infinity
  
  return (a, b) => getVal(a) - getVal(b)
}

array.sort(sortOn('CODE', ["CCM", "CR", "AD", "CC"]))
console.log(array)

The approach used in the order object aligns with Nina Scholz's suggestion. The decision to add 1 to idx instead of using just idx is aimed at simplifying the subsequent line of code. By employing Infinity, items with undefined or non-matching key values are positioned towards the end during sorting. To place these items at the beginning instead, consider using 0 or -Infinity.

Answer 7

Answer №4

To implement custom sorting of an array, you can utilize the array.sort(customSort) method with the following custom sort function:

function customSort(a,b)
{
    a = item_order.indexOf(a.CODE);
    b = item_order.indexOf(b.CODE);

    return a - b;
}

Answer 8

To implement custom sorting of an array, you can utilize the array.sort(customSort) method with the following custom sort function:

function customSort(a,b)
{
    a = item_order.indexOf(a.CODE);
    b = item_order.indexOf(b.CODE);

    return a - b;
}

Answer 9

Answer №5

var data = [
  {
   ID: 168,
   NAME: "First name",
   CODE: "AD"
  },
  {
   ID: 167,
   NAME: "Second name",
   CODE: "CC"
  },
  {
   ID: 169,
   NAME: "Third name",
   CODE: "CCM"
  },
  {
   ID: 170,
   NAME: "Fourth name",
   CODE: "CR"
  },
];

var sortOrder =  ["CCM","CR","AD","CC"];

var arrangedData = data.sort((a, b) => sortOrder.indexOf(a.CODE) - sortOrder.indexOf(b.CODE));

console.log(arrangedData);

Answer 10

var data = [
  {
   ID: 168,
   NAME: "First name",
   CODE: "AD"
  },
  {
   ID: 167,
   NAME: "Second name",
   CODE: "CC"
  },
  {
   ID: 169,
   NAME: "Third name",
   CODE: "CCM"
  },
  {
   ID: 170,
   NAME: "Fourth name",
   CODE: "CR"
  },
];

var sortOrder =  ["CCM","CR","AD","CC"];

var arrangedData = data.sort((a, b) => sortOrder.indexOf(a.CODE) - sortOrder.indexOf(b.CODE));

console.log(arrangedData);

Arrange an array of objects to a specific sequence

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Converting a JavaScript array to a PHP array using POST request

The Codeigniter ajax call fails to function properly when an external JavaScript file is incorporated

Extract the color from the most prominent element in the viewport

What is a more efficient method for incorporating optional values into an object?

The combination of Array.pop and Array.indexOf is not functioning as expected

Adjust the CSS for the "a" tag's "title" attribute

Having trouble accessing properties within a JavaScript object array in React.js?

"Using Angular, when $event is triggered on multiple child elements, each child

Error message: Incorrect XMP data detected within PhotoSphereViewer" and "WebGL issue: INVALID_VALUE error when attempting to load faulty image data

Accessing variable from JavaScript function in Python App Engine

Validating email addresses individually

What is the best way to iterate through an array of objects in React and JavaScript, adding a new property to each object in order to generate a new array

Populate your website with both a Bootstrap Popover and Modal for interactive user engagement through hover

Positioning an element in the center of another using JQuery

How to Use a PHP Variable in an External JavaScript File

Utilize jQuery to dynamically assign classes to list items within a unordered list based on the length of an array

Utilizing a combination of PHP and jQuery, certain checkbox options were dynamically deactivated

Obtain the Upload URL using an Angular service

Unveiling the enigma of Array.from()

Tips for incorporating a last or recently visited feature similar to Google Docs using MongoDB