Create an Array of Objects in the Frontend to sort Objects

[how2mtb]

Hey Guys,

I have a Mountainbike riding technique school and created a "Trainer Login". Inside, every trainer can see his courses and how many bookings the course already got. I am using variants to create different courses on different dates and the Trainer as another option of the product.  In addition, I am using metaobjects to store the location and the participants (which I am automatically storing in a metaobject-list of the variant). Furthermore, I am storing the date in a metafield of the variant, so I can use it to filter it. 

To show the trainer's courses I am currently looping through the whole collection, search for the trainers name in the third option and show the data in a table. (The trainer is logged in as a normal customer, but I added another boolean metafield for customers, where I can state if the customer is a trainer and can see the new page for his courses)

The Problem is, that they are not sorted by date ("datum" in the screenshot, its just in german), which would be pretty important. I tried to create a new array in the theme, store the data inside it and sort them, before I am looping through the new array of objects and show them line by line in the table again. But I could not create an array of objects. Is there another way, or does somebody know, how I could create this array? 

I attached the frontend as shown for the trainer and the code of the page in .liquid. Hopefully somebody could help me here! Thank you very much in advance!

<table class="table--responsive table--small-text">
              <thead>
                <tr>
                  <th><span> Datum & Uhrzeit </span></th>
                  <th><span> Kurs </span></th>
                  <th><span> Location </span></th>
                  <th><span> Verfügbar </span></th>
                  <th><span> Buchungen </span></th>
                  <th><span> Teilnehmerliste </span></th>
                </tr>
              </thead>
              <tbody>
                {% assign trainers_variants = array %}
                {% assign counter = 0 %}
                {% for collection in collections %}
                  {% if collection.id == 425864102168 %}
                    {% for product in collection.products %}
                      {% for variant in product.variants %}
                        {% if variant.metafields.custom.trainer contains customer.last_name %}
                          {% assign trainers_variants[0].datum  = variant.option2 %}
                          {% assign counter = counter | plus: 1 %}
                          <tr>
                            <td data-label="Datum & Uhrzeit">{{ variant.option2 }}</td>
                            <td data-label="Kurs">{{ variant.product.title }}</td>
                            <td data-label="Location">{{ variant.option1 }}</td>
                            <td data-label="Verfügbar">{{ variant.inventory_quantity }}</td>
                            <td data-label="Buchungen">
                              {{ variant.product.metafields.course.gruppengroesse | minus: variant.inventory_quantity }}
                            </td>
                            <td data-label="Teilnehmerliste">
                             {% comment %}  {{ 'Download' | link_to: variant.metafields.custom.teilnehmerliste_link.value }} {% endcomment %}
                              {% assign is_tab = true %}
                              {% assign description = '' %}
                              {% for participant in variant.metafields.custom.teilnehmerliste.value %}
                                {% capture participant_description %} <p> {{ participant.name }} </br> {{ participant.telefonnummer }} </br> {{ participant.email }} </br> Anzahl:  {{ participant.anzahl }} </p> {% endcapture %}
                                {%- assign description = description | append: participant_description %}
                              {% endfor %}

                              {%- if is_tab -%}
                                {% assign title = 'Teilnehmerliste' %}

                                {%- render 'tab', id: counter, title: title, content: description -%}
                              {%- else -%}
                                <div class="rte"></div>
                              {%- endif -%}
                            </td>
                          </tr>
                        {% endif %}
                      {% endfor %}
                    {% endfor %}
                  {% endif %}
                {% endfor %}
              </tbody>
            </table>