Get entries with related to selected categories and then group by category

Question

Background:

I have a listing overview page that lists teaching staff grouped by their department (A category group holds all departments). E.g.

All Staff Members:

-- Science --
    Mrs Magnesium
    Mr Bunson

 -- P.E --
    Mr Stretch
    Mrs Bend

-- Maths -- 
    Ms Multiplication
    Mr Trig

To achieve the above I am using this code, which is working perfectly on a single page:

{% set entries = craft.entries.section('staffMembers').with(['staffPhoto']).all() %}
{% for category, catEntries in entries | group('staffGroup.one().title') %}
    <div>
    {% for entry in catEntries %}                
        <h3>{{ entry.staffTitle }}</h3>  
        <p>{{ entry.staffBio }}</p>     
    {% endfor %}
    </div>
{% endfor %}

Question:

The client now needs to split these staff members across different pages, like the example below. So in order to achieve this I want them to be able use a category field (entry.staffGroups) where they can select multiple categories (departments) to display on each page. Hope I am making sense!

Science Staff Page:

-- Science --
    Mrs Magnesium
    Mr Bunson

Physical Education Staff Page:

 -- P.E --
    Mr Stretch
    Mrs Bend

Mathematics Staff Page

-- Maths -- 
    Ms Multiplication
    Mr Trig

I am struggling to achieve this, my attempt is below:

{# get the selected categories (departments) from category field #}
{% set departments = entry.allDepartments.all() %}

{# Set the entries, and attempt to relate them to ONLY the selected departments.#}
{% set entries = craft.entries.section('staffMembers').relatedTo(departments|join(',')).with(['staffPhoto']).all() %}
    {% for category, catEntries in entries | group('staffGroup.one().title') %}
        <div>
        {% for entry in catEntries %}                
            <h3>{{ entry.staffTitle }}</h3>  
            <p>{{ entry.staffBio }}</p>     
        {% endfor %}
        </div>
    {% endfor %}

Example of entry:

Thanks!!

Answer 1

I may not understand fully, but it sounds like you could just loop over the attached Department Categories, then query for Staff related to that category:

{# Load the Departments Categories: #}
{% set departments = entry.allDepartments.all() %}

{% for department in departments %}
  {# Find all the Staff Members associated with the department: #}
  {% set staff = craft.entries({
    section: 'staffMembers',
    relatedTo: department,
    with: ['staffPhoto']
  }).all() %}

  <h1>{{ department.title }}</h1>
  <ul>
    {# Loop over the Staff Members: #}
    {% for person in staff %}
      <li>{{ person.title }}</li>
    {% endfor %}
  </ul>
{% endfor %}

There is a (very slight) performance penalty for performing queries like this in a loop, but it sounds like each of these focused sub-pages won't have too many Departments listed anyway.