Django+AlpineJS : получение данных объекта ForeignKey с помощью x-init и x-data и итерация по ним

У меня есть 2 модели, Band (имеет параметры название, жанр, страна) и Album (имеет ForeignKey группы, и другие параметры - название и год), и я пытаюсь сериализовать их с помощью AlpineJS так, чтобы у меня была страница, отображающая список групп со списком соответствующих альбомов рядом с ними. Обычно я могу сделать это без Alpine, но в данном случае мне нужно построить фильтрацию поиска (например, по жанру или году, но это не является текущей проблемой) с Alpine, поэтому я просто должен использовать его. Я также знаю, как получить данные объектов из одной модели, но когда их два в одном x-data div, я в растерянности.

Возможно, есть способ сделать одну единственную функцию, которая будет иметь все данные о группе и альбоме? Но тогда как бы я перечислил их рядом друг с другом, если нет запрошенного id, я не знаю. Черт возьми, я теряюсь в этом, хотя в основном понимаю все эти объектные отношения.

Приведенный ниже код - это то, что у меня есть сейчас. Пробовал это, внутренний цикл x-for не работает, но он прекрасно работает без него, т.е. если я только получаю данные Band и отображаю соответствующую информацию о них, например, жанр или страну. html-страница:

          <template x-for="band in bands">
            <p x-text="`${band.name} - ${band.genre}`"></p>
                <template x-for="album in band.albums.all">
                    <p x-text="`${album.name} - ${album.year}`"></p>
                </template>
        </template>

    </div>

views.py:

def bands(request):
    bands = Band.objects.all()
    data = []
    for band in bands:
        data.append({'name': band.name, 'genre': band.genre,
                    'country': band.country})
    return JsonResponse(data, safe=False)


def albums(request):
    albums = Album.objects.all()
    data = []
    for album in albums:
        data.append({'name': album.name, 'year': album.year})
    return JsonResponse(data, safe=False)````

Вернуться на верх