How to sort an array of objects using two properties but conditionally group in the sort order depending on a condition?

Question

This question is a continuation to this question.

Lets say I have an array like below:

const questions = [
  {_id: 1, q: 'why?', group: 'no-group', date: '8', selected: false }, 
  {_id: 2, q: 'what?', group: 'group 1', date: '6', selected: false }, 
  {_id: 3, q: 'when?', group: 'no-group', date: '7', selected: false }, 
  {_id: 4, q: 'where?', group: 'group 1', date: '5', selected: false }, 
  {_id: 5, q: 'which?', group: 'group 2', date: '3', selected: false },
  {_id: 6, q: 'who?', group: 'no-group', date: '0', selected: false },
  {_id: 7, q: 'why not?', group: 'group 2', date: '9', selected: false }, 
  {_id: 8, q: 'who, me?', group: 'group 1', date: '4', selected: false }, 
  {_id: 9, q: 'where is waldo?', group: 'group 1', date: '1', selected: false }, 
  {_id: 10, q: 'which way is up?', group: 'no-group', date: '2', selected: false },
  {_id: 11, q: 'when is lunch?', group: 'group-2', date: '10', selected: false }, 
];

How can I write code to sort it so that the objects are sorted by date and by group. But if: lets say group 1 appears as the second object, then the following objects should be group 1 sorted by date until all group one objects are listed and the same for all other objects except objects that have 'no-group' as the group property value.

So for the array above I should get an output like below:

[
  {_id: 6, q: 'who?', group: 'no-group', date: '0', selected: false },

  {_id: 9, q: 'where is waldo?', group: 'group 1', date: '1', selected: false }, 
  {_id: 8, q: 'who, me?', group: 'group 1', date: '4', selected: false }, 
  {_id: 4, q: 'where?', group: 'group 1', date: '5', selected: false }, 
  {_id: 2, q: 'what?', group: 'group 1', date: '6', selected: false },

  {_id: 10, q: 'which way is up?', group: 'no-group', date: '2', selected: false },

  {_id: 5, q: 'which?', group: 'group 2', date: '3', selected: false },
  {_id: 7, q: 'why not?', group: 'group 2', date: '9', selected: false }, 
  {_id: 11, q: 'when is lunch?', group: 'group 2', date: '10', selected: false },

  {_id: 3, q: 'when?', group: 'no-group', date: '7', selected: false }, 
  {_id: 1, q: 'why?', group: 'no-group', date: '8', selected: false }, 
];

// the spacing is just for easier readability.

Answer 1

You could sort by date, group by unsing an object for same groups and get a flat array.

const 
    questions = [{ _id: 1, q: 'why?', group: 'no-group', date: '8', selected: false }, { _id: 2, q: 'what?', group: 'group 1', date: '6', selected: false }, { _id: 3, q: 'when?', group: 'no-group', date: '7', selected: false }, { _id: 4, q: 'where?', group: 'group 1', date: '5', selected: false }, { _id: 5, q: 'which?', group: 'group 2', date: '3', selected: false }, { _id: 6, q: 'who?', group: 'no-group', date: '0', selected: false }, { _id: 7, q: 'why not?', group: 'group 2', date: '9', selected: false }, { _id: 8, q: 'who, me?', group: 'group 1', date: '4', selected: false }, { _id: 9, q: 'where is waldo?', group: 'group 1', date: '1', selected: false }, { _id: 10, q: 'which way is up?', group: 'no-group', date: '2', selected: false }, { _id: 11, q: 'when is lunch?', group: 'group 2', date: '10', selected: false }],
    result = questions
        .sort((a, b) => a.date - b.date)
        .map((groups => o => {
            if (o.group === 'no-group') return o;
            if (groups[o.group]) {
                groups[o.group].push(o);
                return [];
            }
            return groups[o.group] = [o];
        })({}))
        .flat();

console.log(result);

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