Dealing with null values position when sorting an array based on numeric values

Question

Angular application. I am sorting an array into a *ngFor to loop through the results to display in sorted order.

So the question isn't just a simple sort by numeric value. I have a list of users in an Array. Each user has a sortId of a number value, that's straightforward. e.g.

this.users.sort((a, b) => a.sortId - b.sortId);

this will give me a result like:

Row 1 - Sort ID: null - original array position: 7
Row 2 - Sort ID: 1 - original array position: 4
Row 3 - Sort ID: 2 - original array position: 1
Row 4 - Sort ID: 3 - original array position: 3
Row 5 - Sort ID: 4 - original array position: 6
Row 6 - Sort ID: 5 - original array position: 8
Row 7 - Sort ID: 6 - original array position: 5
Row 8 - Sort ID: 7 - original array position: 2

However, I want to deal with null values by just skipping over them, maintain the their position of the original array - so the null above will be in the row 7(as its original array position was 7), regardless of whether there is a sortId of 7 already. SortId: 7 will just go into row 8.

Expected result:

Row 1 - Sort ID: 1 - original array position: 4
Row 2 - Sort ID: 2 - original array position: 1
Row 3 - Sort ID: 3 - original array position: 3
Row 4 - Sort ID: 4 - original array position: 6
Row 5 - Sort ID: 5 - original array position: 8
Row 6 - Sort ID: 6 - original array position: 5
Row 7 - Sort ID: null - original array position: 7
Row 8 - Sort ID: 7 - original array position: 2

Field of users: (the arrayPosition property is just added for demo purposes, so can't be used.)

  users = [
    {
      user: 'fred',
      arrayPosition: 1,
      sortId: 2
    },
    {
      user: 'Gen',
      arrayPosition: 2,
      sortId: 7
    },
    {
      user: 'Billy',
      arrayPosition: 3,
      sortId: 3
    },
    {
      user: 'Sid',
      arrayPosition: 4,
      sortId: 1
    },
    {
      user: 'James',
      arrayPosition: 5,
      sortId: 6
    },
    {
      user: 'Tom',
      arrayPosition: 6,
      sortId: 4
    },
    {
      user: 'Jim',
      arrayPosition: 7,
      sortId: null
    },
    {
      user: 'Steve',
      arrayPosition: 8,
      sortId: 5
    }
  ];

I have got it working only when the sortId was lower than the original array position, otherwise it goes out of order:

  this.users.forEach(x => {
    this.fieldsList.splice(x['sortId'] - 1, 0, x);
  });

please help me and take a look at the stackBlitz example.

Perhaps a solution that filters the original list removing null items, sorts that filtered list, then merges that sorted list back into the non-null indices in the original list. — jarmod
– jarmod, Commented Jul 29, 2021 at 19:46

jagjeet · Accepted Answer · 2021-07-29 20:26:23Z

1

solved this by sorting all non null values and then adding null in correct indices

this.fieldsList = this.users
  .filter(x => x.sortId)
  .sort((a, b) => a.sortId - b.sortId);

this.users.forEach((x, i) => {
  if (x.sortId === null) this.fieldsList.splice(i, 0, x);
});

https://stackblitz.com/edit/sorting-n2gfvg?file=src/app/app.component.ts

edited Jul 29, 2021 at 20:26

answered Jul 29, 2021 at 20:18

jagjeet

5953 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Tom Rudge Over a year ago

Needed to add my two bits of logic together! thanks

Tom Rudge Over a year ago

take a look at stackblitz.com/edit/…

Tom Rudge Over a year ago

You will notice that all values are null apart from two sort values which are 2 and 5. These should be in position 2 and 5. So if there is a smaller sort id than the nulls indices value then the sort id should take priority

jagjeet Over a year ago

oh I see, will try to find a solution and update the answer

Collectives™ on Stack Overflow

Dealing with null values position when sorting an array based on numeric values

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related