Arranging a list of objects with a designated starting value to remain at the forefront

Question

Arranging a list of objects with a designated starting value to remain at the forefront

Consider the array and variable shown below:

array = ['complete','in_progress','planned'];
value = 'planned';

The goal is to always sort the array starting with the 'value' variable, resulting in:

array = ['planned','in_progress','complete'];

For example:

array = ['complete','in_progress','planned'];
value = 'in_progress';

The expected output would be:

array = ['in_progress','complete','planned'];

I have tried various approaches without success. Do you have any concise and efficient ideas?

javascript typescript sorting

Answer 1

Answer №1

If you want to prioritize a specific value in sorting, you can do so by checking if it matches one of the arguments and placing it before anything else. If neither item is equal to the specified value, then just proceed with a normal sort.

const array = ['complete','in_progress','planned'];
const value = 'in_progress';

array.sort((a, b) => {
  //a comes first
  if (a == value) return -1;
  //b comes first
  if (b == value) return 1;
  
  //neither matches `value` - compare them normally
  return a.localeCompare(b);
});

console.log(array);

Here's a shorter version achieving the same result by using type coercion:

const array = ['complete','in_progress','planned'];
const value = 'in_progress';

array.sort((a,b) => ((a == value) * -1) || b == value || a.localeCompare(b));

console.log(array);

Answer 2

If you want to prioritize a specific value in sorting, you can do so by checking if it matches one of the arguments and placing it before anything else. If neither item is equal to the specified value, then just proceed with a normal sort.

const array = ['complete','in_progress','planned'];
const value = 'in_progress';

array.sort((a, b) => {
  //a comes first
  if (a == value) return -1;
  //b comes first
  if (b == value) return 1;
  
  //neither matches `value` - compare them normally
  return a.localeCompare(b);
});

console.log(array);

Here's a shorter version achieving the same result by using type coercion:

const array = ['complete','in_progress','planned'];
const value = 'in_progress';

array.sort((a,b) => ((a == value) * -1) || b == value || a.localeCompare(b));

console.log(array);

Answer 3

Answer №2

If I had to suggest something off the top of my head, you could give this a shot:

array = ['complete','in_progress','planned'];
target = 'in_progress';

const answer = array.filter((element) => element !== target)
    .sort()
    .reduce((accumulator, value) => [...accumulator, value], [target]);

An additional note: I completely overlooked the fact that it needs to be sorted.

Answer 4

If I had to suggest something off the top of my head, you could give this a shot:

array = ['complete','in_progress','planned'];
target = 'in_progress';

const answer = array.filter((element) => element !== target)
    .sort()
    .reduce((accumulator, value) => [...accumulator, value], [target]);

An additional note: I completely overlooked the fact that it needs to be sorted.

Arranging a list of objects with a designated starting value to remain at the forefront

Answer №1

Answer №2

Similar questions

Retrieve the access ID from the conn.query result

The issue with viewing next/image properly only occurs on desktops using a responsive layout. I would like for the image

The $.inArray() function returns a value of false or -1, despite the fact that the variable

Using Sails.js to display JSON data retrieved from an HTTPS request in the view

The data from the server is inaccessible to node.js

Utilizing Highcharts/Highstock for handling large volumes of data efficiently

Responding to a tweet with the help of twit and Node.js

Tips for triggering the JavaScript function within dynamically created textboxes on an ASP .NET platform

Is there a way to set up a local npm module directory without using symlinks

Is there a way to compare two regex values using vuelidate?

Encountered an issue during the Jest test where the error message states 'Cannot call Class constructor Stack without using the keyword 'new''

Retrieving information through a jQuery ajax call

The submit button is unable to initiate the ajax function

Display data from two arrays in real-time

What is the best way to handle storing various data in the useState hook from an API response

What is the best way to extract words from a string within a textarea using javascript?

What is the proper way to bring in Typescript types from the ebay-api third-party library?

I am interested in creating a class that will produce functions as its instances

Top recommendation for showcasing a numerical figure with precision to two decimal points

The issue with Ajax.BeginForm OnSuccess is that it prevents the CSS transition from functioning properly