Arranging objects in an array based on a separate array of strings

Question

Arranging objects in an array based on a separate array of strings

Here is an array of objects that I need to rearrange:

var items = [
  { key: 'address', value: '1234 Boxwood Lane' },
  { key: 'nameAndTitle', value: 'Jane Doe, Manager' },
  { key: 'contactEmail', value: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bf5f0f7f1fcf2f6ebf7dffaf0fcf4f1b3fef2f0">[email protected]</a>' },
  { key: 'contactPhone', value: '9876543210' },
  { key: 'localPhone', value: '9876543210' },
  { key: 'status', value: 'pending' },
]

I have another array called order with the desired order for these objects:

var order = [
  'nameAndTitle',
  'contactPhone',
  'contactEmail',
  'address',
]

I need to arrange the items array according to the order specified in the order array. Any ideas on how to achieve this?

javascript arrays angularjs

Answer 1

Answer №1

To organize the indices, consider sorting them by their differences.

var objs = [{ key: 'address', value: '1234 street' }, { key: 'nameAndTitle', value: 'John Smith, CEO' }, { key: 'contactEmail', value: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ae0e5e2e4f9e7e3fee2caede7ebe3e6a4e9e5e7">[email protected]</a>' }, { key: 'contactPhone', value: '1234567890' }],
    keys = ['nameAndTitle', 'contactPhone', 'contactEmail', 'address'];

objs.sort((a, b) => keys.indexOf(a.key) - keys.indexOf(b.key));

console.log(objs);

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

To have full control over the sequence, utilize an object with preset order values and include a default property with a lower value than others to sort unknown keys at the start or with a higher value for the end of the array.

This method also suits complex sorting criteria where unlisted items can be sorted in the middle if required.

var objs = [{ key: 'localPhone', value: '1234567890' }, { key: 'status', value: 'open' }, { key: 'address', value: '1234 street' }, { key: 'nameAndTitle', value: 'John Smith, CEO' }, { key: 'contactEmail', value: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b414443455846425f436b4c464a424705484446">[email protected]</a>' }, { key: 'contactPhone', value: '1234567890' }],
    order = { nameAndTitle: 1, contactPhone: 2, contactEmail: 3, address: 4, default: Infinity };

objs.sort(({ key: a }, { key: b }) => (order[a] || order.default) - (order[b] || order.default));

console.log(objs);

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

ES5

var objs = [{ key: 'localPhone', value: '1234567890' }, { key: 'status', value: 'open' }, { key: 'address', value: '1234 street' }, { key: 'nameAndTitle', value: 'John Smith, CEO' }, { key: 'contactEmail', value: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8a2a7a0a6bba5a1bca088afa5a9a1a4e6aba7a5">[email protected]</a>' }, { key: 'contactPhone', value: '1234567890' }],
    order = { nameAndTitle: 1, contactPhone: 2, contactEmail: 3, address: 4, default: Infinity };

objs.sort(function (a, b) {
   return (order[a.key] || order.default) - (order[b.key] || order.default);
});

console.log(objs);

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

Answer 2

To organize the indices, consider sorting them by their differences.

var objs = [{ key: 'address', value: '1234 street' }, { key: 'nameAndTitle', value: 'John Smith, CEO' }, { key: 'contactEmail', value: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ae0e5e2e4f9e7e3fee2caede7ebe3e6a4e9e5e7">[email protected]</a>' }, { key: 'contactPhone', value: '1234567890' }],
    keys = ['nameAndTitle', 'contactPhone', 'contactEmail', 'address'];

objs.sort((a, b) => keys.indexOf(a.key) - keys.indexOf(b.key));

console.log(objs);

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

To have full control over the sequence, utilize an object with preset order values and include a default property with a lower value than others to sort unknown keys at the start or with a higher value for the end of the array.

This method also suits complex sorting criteria where unlisted items can be sorted in the middle if required.

var objs = [{ key: 'localPhone', value: '1234567890' }, { key: 'status', value: 'open' }, { key: 'address', value: '1234 street' }, { key: 'nameAndTitle', value: 'John Smith, CEO' }, { key: 'contactEmail', value: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b414443455846425f436b4c464a424705484446">[email protected]</a>' }, { key: 'contactPhone', value: '1234567890' }],
    order = { nameAndTitle: 1, contactPhone: 2, contactEmail: 3, address: 4, default: Infinity };

objs.sort(({ key: a }, { key: b }) => (order[a] || order.default) - (order[b] || order.default));

console.log(objs);

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

ES5

var objs = [{ key: 'localPhone', value: '1234567890' }, { key: 'status', value: 'open' }, { key: 'address', value: '1234 street' }, { key: 'nameAndTitle', value: 'John Smith, CEO' }, { key: 'contactEmail', value: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8a2a7a0a6bba5a1bca088afa5a9a1a4e6aba7a5">[email protected]</a>' }, { key: 'contactPhone', value: '1234567890' }],
    order = { nameAndTitle: 1, contactPhone: 2, contactEmail: 3, address: 4, default: Infinity };

objs.sort(function (a, b) {
   return (order[a.key] || order.default) - (order[b.key] || order.default);
});

console.log(objs);

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

Answer 3

Answer №2

To maintain the integrity of your original array, you have the option to create a new array by pushing the objects in the desired order.

However, if altering the original array is not a concern, you can simply utilize the sort function which will arrange the keys based on their position in the 'keys' array (there are resources available to assist you with this method).

edit @Nina Scholz quickly implemented the solution ^^

const objs = [{
    key: 'address',
    value: '1234 street'
  },
  {
    key: 'nameAndTitle',
    value: 'John Smith, CEO'
  },
  {
    key: 'contactEmail',
    value: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e040106001d03071a062e09030f0702400d0103">[email protected]</a>'
  },
  {
    key: 'contactPhone',
    value: '1234567890'
  },
];

const keys = [
  'nameAndTitle',
  'contactPhone',
  'contactEmail',
  'address',
];

const array = keys.reduce((tmp, x) => {
  const item = objs.find(y => y.key === x);

  if (item) {
    tmp.push(item);
  }

  return tmp;
}, []);

console.log(array);

Answer 4

To maintain the integrity of your original array, you have the option to create a new array by pushing the objects in the desired order.

However, if altering the original array is not a concern, you can simply utilize the sort function which will arrange the keys based on their position in the 'keys' array (there are resources available to assist you with this method).

edit @Nina Scholz quickly implemented the solution ^^

const objs = [{
    key: 'address',
    value: '1234 street'
  },
  {
    key: 'nameAndTitle',
    value: 'John Smith, CEO'
  },
  {
    key: 'contactEmail',
    value: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e040106001d03071a062e09030f0702400d0103">[email protected]</a>'
  },
  {
    key: 'contactPhone',
    value: '1234567890'
  },
];

const keys = [
  'nameAndTitle',
  'contactPhone',
  'contactEmail',
  'address',
];

const array = keys.reduce((tmp, x) => {
  const item = objs.find(y => y.key === x);

  if (item) {
    tmp.push(item);
  }

  return tmp;
}, []);

console.log(array);

Answer 5

Answer №3

To rearrange the array, you can utilize the sort method like this:

var items = [{
    category: 'fruit',
    name: 'apple'
  },
  {
    category: 'vegetable',
    name: 'carrot'
  },
  {
    category: 'fruit',
    name: 'banana'
  },
  {
    category: 'vegetable',
    name: 'lettuce'
  }
]

var categories = [
  'vegetable',
  'fruit',
]

items.sort(function(a, b) {
  return categories.indexOf(a.category) - categories.indexOf(b.category);
});

console.log(items)

Answer 6

To rearrange the array, you can utilize the sort method like this:

var items = [{
    category: 'fruit',
    name: 'apple'
  },
  {
    category: 'vegetable',
    name: 'carrot'
  },
  {
    category: 'fruit',
    name: 'banana'
  },
  {
    category: 'vegetable',
    name: 'lettuce'
  }
]

var categories = [
  'vegetable',
  'fruit',
]

items.sort(function(a, b) {
  return categories.indexOf(a.category) - categories.indexOf(b.category);
});

console.log(items)

Answer 7

Answer №4

One way to achieve this is by following these steps:

Iterate through a string array and compare the value (nameAndTitle) with the corresponding index value in your object array. If there is no match, locate that string within the key-tag in your object array and relocate it to the correct index position. This approach should help you accomplish the task effectively.

Answer 8

One way to achieve this is by following these steps:

Iterate through a string array and compare the value (nameAndTitle) with the corresponding index value in your object array. If there is no match, locate that string within the key-tag in your object array and relocate it to the correct index position. This approach should help you accomplish the task effectively.

Arranging objects in an array based on a separate array of strings

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Issues arise when jQuery functions do not execute as expected within an "if" statement following

Encountering an error when attempting to iterate over an undefined property using an API

Managing the URLs of single page applications

Set my click event handler back to its default setting

Dispatch prop within useEffect

Translation of country codes into the complete names of countries

"Enhance your web application with dynamic drop-down selection using Spring, Ajax

Ways to obtain every image placed onto an element

There seems to be a problem with the external JavaScript file not functioning

React-highlightjs failing to highlight syntax code properly

Activate hover effect on toggle button

Dimming the background of my page as the Loader makes its grand entrance

What is the best way to simulate a constructor-created class instance in jest?

Troubleshooting: Angular input binding issue with updating

Having trouble loading AngularJS 2 router

how to set a variable's value outside of a Promise using internal code

Retrieve the numerical key within an md-directive

Encountering an issue while attempting to retrieve information from Vuex store

Building a React Redux project template using Visual Studio 2019 and tackling some JavaScript challenges

Utilizing lodash to Filter Arrays Within Arrays