Sort object keys/entries in specific order

Question

I have an object like this:

const data = {
  val5: 1231,
  val3: 1232,
  val1: 1233,
  val2: 1234,
  val4: 1235,
};

And its has to be sorted by it keys but in specific order:

const sortOrder = ["val1", "val3", "val2"];

If the key is not present in the sortOrder then it has to go below the keys that are present. And the non present keys order should (potentially) stay the same.

The result object should look like this:

{
  val1: 1233, // present in sortOrder at position 0
  val3: 1232, // present in sortOrder at position 1
  val2: 1234, // present in sortOrder at position 2
  val5: 1231, // NOT present in sortOrder
  val4: 1235, // NOT present in sortOrder
}

I've been playing with sorting the keys only for now and can achieve some order but the non present keys are appearing at the top

const ordered = Object.keys(data).sort((a, b) => {
  return sortOrder.indexOf(a) - sortOrder.indexOf(b);
});

[ 'val5', 'val4', 'val1', 'val3', 'val2' ]

As you can see val5 and val4 are the beginning and they should be at the end (after val2)

Answer 1

You almost had it, the only issue is that you're not checking if sortOrder actually contains the key you're iterating or not.

If you do sortOrder.indexOf(x) but x is not in sortOrder, then indexOf will return -1, explaining why the non-existent keys are always on top (--1 === +1). See reference for more info.

The fix is to manually put all keys that are not present in sortOrder at the end of the array:

if (!sortOrder.includes(a)) return 1 
if (!sortOrder.includes(b)) return -1

So in the end, you'd have this:

const ordered = Object.keys(data).sort((a, b) => {
  if (!sortOrder.includes(a)) return 1 
  if (!sortOrder.includes(b)) return -1
  return sortOrder.indexOf(a) - sortOrder.indexOf(b);
});