Xano and WeWeb: Many-to-Many Relationship Display and Filter

Share your work
1

Hi everyone!

I’ve been troubleshooting an issue for a week or so now and finally cracked a good solution. This may be something that doesn’t make sense/apply to many others, but I figured I’d share in case it can help someone.

The goal:

  1. Pull a list of users from a table in Xano and display them in a collection list.
  2. Within each user “card” in the list, display groups to which that user belongs. Information about the groups - such as the group name - is housed in a separate table in my database. Each user can belong to multiple groups, and each group is made of multiple users.
  3. Allow filtering of the list via a dropdown, which will show only the members of the selected group.

The Problem:

  • Following the Xano documentation and videos, I first tried to create the many-to-many relationship in Xano by adding a field in my users table of the Object List type. Then, I used the table reference field type when setting up my schema. Once I assigned a given user to their groups, this field looked like this: [{Group: Group #1}, {Group: Group #2}]. This worked great in that I could display the Groups on each user’s card, as desired - yay! Then, I realized this wasn’t the solution when I went to filter the collection list by that field and couldn’t.
  • Next, I took a different approach to setting up my Xano user table. I added a new table reference field. Then, I changed the type to list. The result looked like this: [Group #1 ID, Group #2 ID]. This allowed me to filter the collection list - yay! But, I couldn’t display the data in a card list because it was just IDs. When I used an addon to bring in the Group Name, I became unable to filter the list again! Aargh!

The Solution:
So, I started to realize that, in order to display details about multiple references, the Xano field had to be setup as an object list. But, to be able to filter based on the IDs of those references, WeWeb needed a simple array. As an intermediate step to the solution, I just created one of each field type in my table. This worked, but was problematic since it was duplicating data and was just bound to get messed up over time.
After much trial and error (I am still a relative beginner in Xano), I discovered that setting up my API like this allowed me to achieve my goals:

  1. Query all records from user table (filtering by some parameters unrelated to this post)
  2. For Each Loop:
    a. Get record for each individual user
    b. Create a variable (justgroups) containing just the IDs of the groups to which the user belongs
    c. Update the Response variable to response.justgroups

Once in WeWeb, I use the full Group reference field to display the group info on the user card list, and the justgroups array to filter the list via dropdown.

I don’t know if it’s the best or most elegant solution, but it is working for me :smiley:

4 Likes
2

Nice one @kyanaloe! :raised_hands:

Thanks a lot for sharing, really appreciate it :grinning:

3

Thank you @kyanaloe . I, too, spent about a week on this. Apparently it’s tough to dynamically filter (for the intersection of different attributes). After multiple different implementations, I used for loops as you did. Thanks!