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

Using JSON to insert an array into an object with identical key name

How can I extract an object from an array by using a string key in either Observable or lodash?

What is the process for completing a form with Protractor and TextAngular?

When using jQuery and AJAX together, it seems that the POST method is returning

Using AngularJs's filter to display a specific string when the model evaluates to true

Tips for receiving accurate HTML content in an Ajax request

In search of a straightforward Angular class directive that can easily add background color styling

Having trouble implementing object type switching in Typescript

NodeJS File Upload: A Step-by-Step Guide

I'm encountering an issue with automatically updating content on a webpage

Activate video in Slick Slider with the click of a button

Using Cypress fixtures with TypeScript

The access to Angular.js has been denied with a 403 Forbidden error

Display elements that are unique to one array and not found in another array using React

Learn how to achieve a sleek animation similar to the famous "Ken Burns effect" by utilizing the CSS property "transform" instead of "object-position". Check out the demo to see it in action!

Fixing the issue of scrollbars not working in existing divs while creating new jscrollpane divs in jQuery

Using React-Router v6 to pass parameters with React

The process of implementing server-side rendering for React Next applications with Material-ui using CSS

Angular schema forms allow users to make multiple selections at once through a

Is there a way to retrieve the client's IP address from the server side within a Next.js application?